[Flutter] 플러터 기본생성 코드 리뷰

Flutter 프로젝트를 처음 만들었을 때 생기는 코드를 분석해봤다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Dev Test',
        theme: ThemeData(
        primarySwatch: Colors.purple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

전체적인 코드를 살펴보자. Dart 언어는 객체지향 언어이며, 자바 언어와 매우 흡사해 보인다. 또한 내부 코드와 뷰 코드가 합쳐저 있는 것을 볼 수 있다. 뷰 코드와 내부 코드가 합쳐져 있으면 따로 언어를 배울 필요가 없어 편리하지만 협업을 할때는 큰 단점으로 작용한다.

import 'package:flutter/material.dart';

Material 패키지를 불러온다. 

참고로 Material은 이렇게 구글구글스러운 디자인을 말한다.

void main() {
  runApp(MyApp());
}

main 함수에서 MyApp 함수를 실행한다.

class MyApp extends StatelessWidget {

StatelessWidget을 상속받는 클래스 MyApp을 생성한다.

        @override
        Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Dev Test',
        theme: ThemeData(
        primarySwatch: Colors.purple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Title이 Flutter Dev Test, Primary Color가 Purple, VisualDensity가 AdaptivePlatformDensity인 Context을 생성한다.

여기서 MyLoginScreen, MyCatalog, MyCart와 같은 층에 있는 녀석을 생성한다고 보면 될 것 같다.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

StatefulWidget을 상속받는 MyHomePage Class를 생성한다. _MyHomePageState()를 CreateState를 통해 계속 재호출하게 한다.

 

StatelessWidget와 StatefulWidget의 차이점은 이 글에서 아주 잘 설명해주고 계신다. 너무 좋은 글이라 큰절을 15번해도 좋다. 짧게 보자면 큰 차이점은 전자는 Build Method가 한번만 실행되고, 후자는 Build Method가 계속 재호출된다. 즉 화면을 계속 그릴 수 있냐, 없냐의 차이다. 위 MyApp Class는 값이 고정적이니 StatelessWidget을 상속받아도 문제가 없는 것이고, 화면을 계속 바꿔야하는 MyHomePage Class는 StatefulWiget을 상속받는 것이다.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

appBar의 Title을 MyApp에서 받은 Title로 정한다. Body에선 레이아웃을 생성한다. FloatingActionButton에선 버튼을 생성하고, 클릭시 이벤트 등을 정한다.

 

플러터를 처음 접한 내 입장에서 보면, 확실히 자마린, React Native보단 내 취향에 가까운 녀석인 것 같다.