Flutter 공부 기록2

첫 flutter 프로젝트를 생성해보겠습니다.

File-> New-> New Flutter Project를 눌러주세요.

 

Project name을 자유롭게 입력해주시고 Flutter SDK path는 Flutter 설치 경로를 넣어줍니다.

만들고나면

이런식으로 틀이 만들어져 있을겁니다. 

print문은 원래 있던건 아니고, 추가해보았어요. 이대로 실행을 시키면.. 오류가 나서 설정을 먼저 해볼게요.

 

상단에 main.dart라고 써있는 부분 눌러서 Edit Configuration -> Additional run args에 --web-hostname=127.0.0.1를 입력하고 OK를 눌러주세요. 그리고 main.dart 좌측에서 어느걸로 실행할지 고를 수 있는데 chrome (web)을 사용해 보겠습니다.

그럼 다시 시작해보겠습니다! 상단의 재생버튼 닮은 초록색 버튼을 눌러주세요. 

 

실행하면 chrome 창 하나가 뜨고, +버튼을 누를때마다 중앙의 숫자가 1씩 증가하는, 그런 알고리즘이 적용되었네요.

 

코드를 조금 분석해보면, 

 

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      // This is the theme of your application.
      //
      // TRY THIS: Try running your application with "flutter run". You'll see
      // the application has a blue toolbar. Then, without quitting the app,
      // try changing the seedColor in the colorScheme below to Colors.green
      // and then invoke "hot reload" (save your changes or press the "hot
      // reload" button in a Flutter-supported IDE, or press "r" if you used
      // the command line to start the app).
      //
      // Notice that the counter didn't reset back to zero; the application
      // state is not lost during the reload. To reset the state, use hot
      // restart instead.
      //
      // This works for code too, not just values: Most code changes can be
      // tested with just a hot reload.
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

MaterialApp을 포함한 대부분의 .. 뭐라고 부르는진 아직 모르지만 그런 것들(?)은 json 형태처럼 생겼습니다.

 

상단 연보라색의 제목으로 보이는 부분은 (html로 보면 header 느낌)

 

home: const MyHomePage(title: 'Flutter Demo Home Page')

이 부분으로 결정하는 것 같고, 중앙의 문구는 

 

child: Column(
  // Column is also a layout widget. It takes a list of children and
  // arranges them vertically. By default, it sizes itself to fit its
  // children horizontally, and tries to be as tall as its parent.
  //
  // Column has various properties to control how it sizes itself and
  // how it positions its children. Here we use mainAxisAlignment to
  // center the children vertically; the main axis here is the vertical
  // axis because Columns are vertical (the cross axis would be
  // horizontal).
  //
  // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
  // action in the IDE, or press "p" in the console), to see the
  // wireframe for each widget.
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    const Text(
      'You have pushed the button this many times:',
    ),
    Text(
      '$_counter',
      style: Theme.of(context).textTheme.headlineMedium,
    ),
  ],
),

이부분의 const Text를 사용하는 것 같습니다.

자바스크립트가 쓰이는건가 싶어서 const를 let이랑 var로 바꿔도 잘 작동하나 해봤는데 빨간줄 뜨네요.

아직 구조와 문법을 배운게 아니니 원래대로 해놓고 좀 기다려야겠습니다.

 

그리고 숫자는 _counter인 것 같죠?  ctrl+F로 찾아보니 int로 선언되어 있고, _incrementCounter() 메소드 안에서 1씩 증가함을 확인할 수 있었습니다.

 

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.

그리고 onPressed에 _incrementCounter() 이 있습니다. 여러분도 감이 오죠?

floatingActionButton이란걸 눌렀을때 해당 함수를 호출해서 _counter를 1만큼 증가시킨다.

 

일단 안배운 상태에선 이정도까지만 분석할 수 있을 것 같습니다.

 

아 그리고 깜빡했던 print문은 어디갔을까요?

 

print("첫 프로젝트");

 

eclipse에서 자바 콘솔 돌려보신 분이시라면 알겠지만, 예상대로 콘솔쪽에 찍혀있습니다.

 

그리고 책에서 문법을 좀 살펴보면.. main, 주석, print 등등 패스하고 몇가지만 짚어보겠습니다.

변수 선언은 var과 dynamic 그리고 기본 타입들(int, String, bool 등)이 있습니다.

var과 dynamic은 둘다 타입을 자동으로 추론해주는데, var은 한번 타입을 추론했으면 다른 타입으로 변환 시킬 수 없고,

dynamic은 가능하다고 합니다. 예를들면? 

 

var a=11;
a="11";

 

a는 var에 의해 int 형으로 추론이 되었으므로, "11" 이라는 String 타입으로 변환이 불가능하고 (빨간줄 뜹니다)

 

dynamic a=11;
a="11";

dynamic은 이걸 가능하게 한다는 뜻입니다.

 

int a=11;
a="11";

물론 기본 자료형은 당연히 안됩니다. (빨간줄 뜹니다)

 

그리고 또 흥미로운 부분은 final과 const의 차이인데, 각각 런타임 상수, 빌드타임 상수라고 합니다.

(공통점은 값을 한번 선언하면 변경이 불가능하다는 점입니다.)

const는 빌드시 값을 알 수 있어야하기 때문에 

void main() {
  int b= 10;
  const int a= b;

  runApp(const MyApp());
}

 

이렇게 작성했을때 b는 빌드타임에 선언되어 있지 않아서 a에 b값을 넣는 이 코드가 에러가 난다는 것 같습니다.

(혹시 다르다면 얼마든지 지적해주시길 바랍니다..)

 

이번 글은 여기까지 작성하고, 다음 글은 이어서 문법을 조금더 살펴보겠습니다.

감사합니다~