Flutter 스터디 2 Widget과 main.dart 기본 작성

순한맛 5 플러터에서 제일 중요하다는 위젯이란 무엇일까요?

플러터에서 제일 중요한 Widget

Widget 위젯
1. 독립적으로 실행되는 작은 프로그램
2. 바탕화면 등 날씨, 뉴스, 생활 정보 등을 보여줌
3. 그래픽이나 데이터요소를 처리하는 함수를 가지고 있음.


What is Widget in flutter?
1. UI를 만들고 구성하는 모든 기본 단위 요소
> image, text, icon, text field 등 화면을 구성하는 모든 것
2. 눈에 보이지 않는 요소들까지 위젯
> 레이아웃을 정의하는 모든 것들도 포함 예) center, column, padding 등
3. 그냥 모든 것이 위젯 = 구성요소들도 위젯이라 하고 그것들이 모이고 쌓여서 만들어진 앱 자체도 하나의 위젯이라 할 수 있음.


Types of Widgets 위젯의 종류
1. Stateless Widget (상태가 없는 정적인 위젯)
2. Stateful Widget (계속 움직임이나 변화가 있는 위젯)
3. Inherited Widget

Stateless와 Stateful의 일반적인 의미
1. Stateful : Value 값을 지속적으로 추적 보존한다는 의미
2. Stateless : 이전 상호작용의 어떠한 값도 저장하지 않음

Stateless Widget
1. 스크린상에 존재만 할 뿐 아무것도 하지 않음
2. 어떠한 실시간 데이터도 저장하지 않음
3. 어떠한 변화(모양, 상태)를 유발시키는 Value 값을 가지지 않음
예시) text, image 등

Stateful Widget
1. 사용자의 Interaction에 따라서 모양이 바뀜
예시) 체크박스, 라디오버튼 등
2. 데이터를 받게 되었을 때 모양이 바뀐
예시) text field 등


Flutter Widget tree
1. Widget들은 tree 구조로 정리될 수있음
2. 한 Widget 내에 얼마든지 다른 widget 포함 가능
3. Widget은 부모 위젯과 자식 위젯으로 구성
4. Parent widget 부모위젯을 widget container라고 부르기도 함 


Flutter는 모든 것을 코드로 작성함.

 

---

순한맛 6 플러터 프로젝트 폴더와 기본 코드 이해하기 1

Flutter 프로젝트 폴더의 구성
1. pubspec.yaml
프로젝트의 메타 데이터를 정의하고 관리하는 곳
프로젝트 버전, 사용환경, Dart 버전, 각종 Dependency, Library 등을 이 곳에서 관리
2. android, ios 폴더
각 플랫폼에 맞게 배포하기 위한 정보들 위치한 곳
3. test 폴더
Dart 관련 테스트를 해볼수 있는 곳
4. lib 폴더
주로 사용하는 main.dart 가 들어 있는 부분 


클래스 명과 함수 명
함수 : main(), runApp()
클래스 : MyApp() 
(camelcase : 변수, 파일 등 이름을 띄어쓰기 없이 짓기 위하여 따르는 관례. MyApp과 같이 단어를 구분하는 첫 글자는 대문자로 표시)


main.dart 작성
1. import 'package:flutter/material.dart';
플러터 SDK에 포함된 모든 기본 위젯, 기능 등을 사용할 수있 음
Material Design : 모바일, 데스크탑 등 다양한 디바이스를 아우르는 일관된 디자인을 위해서 구글이 제공한 가이드 라인

2. void main() => runApp(app)
=> : 코딩을 간결하게 하기 위한 기호. 여기서는 메인 함수가 다른 함수를 호출한다는 의미
메인 함수가 runApp 함수를 호출. runApp은 반드시 widget을 argument로 가져야 함
runApp 함수는 호출될 때마다 함수에 전달되는 어떤 값을 가져야하는데 그 값이 구체적으로 widget이어야한다.
여기서 widget을 Argument라고 부름


MyApp() : 최초로 어플을 빌드하는 역할, 뼈대를 만드는 역할만 하기에 어떠한 변화가 없는 정적인 위젯 = Stateless widget

---

순한맛 7 플러터 앱페이지 기본 코드 이해하기 2

main.dart 작성 (이어서)

class MyApp extends StatelessWidget {  // 1) StatelessWidget으로 MyApp 커스텀 위젯 생성
  @override
  Widget build(BuildContext context) {
    return MaterialApp(  // 2) 반환 값을 Container에서 Material widget으로 변경
      title: "First app", // 3) 타이틀 지정
      theme: ThemeData( // 4) ThemeData 불러오기
        primarySwatch: Colors.blue // 5) primarySwatch 이용해서 특정 색상 음영을 설정
      ),
      home: MyHomePage(),  // 5) 앱이 시행됐을때 가장 처음 보여지는 위젯 이름 지정해주기
    );
  }
}

---

순한맛 8 플러터 앱페이지 기본 코드 이해하기 3 (완결편)

 

main.dart 작성 (이어서2)

 

class MyHomePage extends StatelessWidget {  // 1) StatelessWidget 생성
  @override
  Widget build(BuildContext context) {
    return Scaffold(  // 2) return Scafflod로 변환. 앱화면에 다양한 화면을 구성할 수 있도록 빈 도화지 같은 역할을 함.
      appBar: AppBar(  // 3) appBar : 상단 바
        title: Text('First app'), // 4) appBar의 타이틀
      ),
      body: Center( // 5) body : Scaffold 위젯 내 가장 중요한 요소. Center : 모든 요소를 중앙 정렬
        child: Column( // 6) body 내 여러 child 위젯을 가지는데 그것들을 세로로 배치하겠다.
          children: <Widget>[ // 7) 세로로 배치될 text 위젯들
            Text('Hello'),
            Text('Wolrd'),
            Text('bye')
          ],
        ),
      ),
    );
  }
}

* 한 페이지에 다 넣는 것보단 따로 분리해서 가독성과 유지보수가 용이하게 만드는 것이 중요

 

 

---

main.dart 기본 완성본 (암기해서 논리적으로 이해하기)

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First app',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( 
      appBar: AppBar(
        title: Text('First app'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text('Hello'),
            Text('Wolrd'),
            Text('bye')
          ],
        ),
      ),
    );
  }
}