[flutter] 01. Hello world - 2

안녕하세요 저번 게시물에서 간지나게? 커맨트창에서 타다닥 해서 화면하나 띄웠죠? ㅎㅎ
이번엔 안드로이드 스튜디오 툴에서 직접 코딩해서 띄워봅시다~

일단, File > Open클릭하고 커맨드에서 flutter create hello_world 했던 프로젝트를 열어주세요~

그럼 프로젝트가 불러와집니다.
바로 lib > main.dart를 열어주세요.(일단 무지성..)
기본으로 작성된 코드들은 쿨하게 삭제~ 전 책이 시키는대로 잘합니다 ㅎㅎ 찝찝하시면 어디 복사해놓으세요~

그리고 아래 코드를 작성해줍니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    
    return Center(
      child: Text('Hello World Travel', textDirection: TextDirection.ltr,),
    );
  }
}

다 작성 하시고 한줄 한줄 대충 해석 해보시면 느낌 오실거에요~~
프로그래밍을 안해보신분도 영어 해석하듯이 한번 해보세요(직접해보시고 제가한거랑 비교해 봐용 제께 정답은아님 ㅎ)

 

 

 

 

 

 

저도 잘 플러터는 잘 몰라요 그냥 여태 프로그래밍 했던 느낌으로 써봤어요 ㅎㅎ

완벽하진 않죠 하나씩 제대로 볼게요.
너무 조급하게 생각하지 맙시다~ 저도 그렇고 처음 보신분들 모두~ 천천히 하나씩 보다보면 무조건 익숙해집니다~
지금 처음이라 어색할때, 이렇게 한번 해보면 나중에 큰 도움이 되고, 능숙하게 될것이라 믿습니다!

위에 부분은 다트에 있는 라이브러리 갖다 쓴다는 걸 어렵게 써봤네요 ㅎㅎ

main()은 모든 앱의 시작지점!
runApp()을 호출하도록 되어있고 그안에 표현될 MyApp이 우리가 구성할 위젯을 표현할 class입니다.

MyApp은 StatelessWidget을 상속받아요 쉽게말해 이미 StatelessWidget라는 class에 있는 변수, 메서드를 갖다 쓴다는 소리입니다.
플러터는 크게 두가지 위젯유형이 있다는데, StatelessWidget, StatefullWidget이 있다고해요
전자는 위젯을 작성한 후 변경할 필요가 없는 경우, 후자는 반대로 작성한 후 변경할 수 있는경우 사용합니다.
왜 이렇게 나눴는지는 나중에 한번 보도록하고 넘어갑시다.
@override는 프로그래밍을 하시는분들이라면 바로 이해하실거에요 쉽게말해 덮어쓴다는거겠죠.(재정의)
쉽게말해, 우리가 상속받은 StatelessWidget라는 class build(BuildContext) 메서드가 있겠죠? MyApp에서 재정의 하는겁니다.
자바처럼 super를 써서 StatelessWidget의build의 기능을 쓸수 있는지는 모르겠지만요.. 그것도 나중에 봐요 ㅎ

리턴 센터 안에 차일드 속성으로 텍스트.. 제가 위에 해석한 내용이 대충 맞겠죠? ㅋㅋㅋㅋㅋㅋㅋ 
중요한 것은 이렇게 위젯이 계층구조로 이뤄진다는 겁니다. 일단 이정도 까지 이해하고 실행해봅시다..


위에 디바이트 선택해주시고 실행(재생모양 버튼) 한번 해봅시다~

이제 진짜 hello world를 찍었네요~

정말 수고하셨어요. 앱이라기보단 그냥 글자하나 찍은거지만 많은걸 해석해본 시간이었네요 ㅎㅎ
처음에만 이렇게 이해하다보면 나중엔 익숙해서 자연스럽게 되고 이해도 될거라는 긍정적인 마인드로 해봅시다!!

 

저도 힘들지만 열심히 써볼게요.. 저도 공부하고 복습하는데 좋네요 ㅎㅎ 화이팅!~