[Flutter] 기본 코드

유튜브 '코딩셰프'님의 강의를 보고, 글로 다시 내용 정리를 하며 공부해볼 예정이다.
영상이 보고싶다면, https://www.youtube.com/watch?v=AdYRASHRKwE&list=PLQt_pzi-LLfpcRFhWMywTePfZ2aPapvyl&index=1 를 참고

일단 기본적으로는 flutter material.dart가 임포트 되어야함

다른 언어와 유사하게 main 문으로 시작

import 'package:flutter/material.dart';

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

runApp은 최상위 함수이며 위젯을 아규먼트로 받는다.

※ stl 까지 입력하면 statelessWidget이 나온다

Container를 MaterialApp으로 변경하여 아래와 같은 class를 만들어보았다.

class MyApp extends StatelessWidget {
	@override
    Widget build(BuildContext context) {
    	return MaterialApp (
        	title: 'First app', //앱의 이름
            theme: ThemeData(
            	primarySwatch: Colors.blue //app에서 기본적으로 사용할 색상 모음(음영) 지정
            ), // ThemeData <- 자동으로 위젯의 끝을 작성해줌
            home: MyHomePage(), // 가장 먼저 보여질 위젯
        );
    }
}

이제 위처럼 기본 MaterialApp을 작성했으니, MyHomePage 위젯도 작성해보자.

Stateless Widget vs Stateful Widget
위젯을 만들 때, 이 위젯을 둘중에 어떤 것으로 만들어야 할지 고민이 필요함.
텍스트 박스, 버튼 등 어떤 동작을 하는 위젯이라면 Stateful Widget이어야 한다.

이 예제에서는 동작은 추가되지 않고, 간단한 텍스트만 출력되는 앱을 만들 예정이기 때문에, stateless로 추가한다.

이 위젯은 Scaffold를 리턴하도록 하겠다. (Scaffold: 앱화면에 다양한 요소를 배치하고 그릴수 있도록 도와주는 빈 도화지 같은 역할)

class MyHomePage extends StatelessWidget {
	@override
    Widget build(BuildContext context) {
    	return Scaffold(
        	appBar: AppBar( // app bar 위젯
            	title: Text("First App") // 앱 바에 출력될 타이틀로 텍스트 위젯 사용
            ),
            body: Center(
            	child: Column( // 자식 위젯들을 세로로 배치 
                	children: <Widget>[ // 이 배열안의 위젯들이 세로로 배열됨
                    	Text('TOP'),
                        Text('MID'),
                        Text('BOTTOM'),
                    ],
                ), 
            ),
        );
    }
}

여기까지 진행하면서 느낀건, front end 코딩도 결국은 다 비슷하다는걸 느꼈다. 그리고 약간 구글의 냄새가 짙게 나는 디자인을 어떻게 커스텀해야할지 중요해보인다.