Baisc Flutter

main

• 앞서 봤던 main페이지에서 main함수를 제외한 나머지것들을 지우면 아래와 같은 모양이 나타난다.
• Flutter에서는 이 main함수를 프로그램의 시작점으로 가져간다.
• 그리고 main함수 안에는 runApp이라는 void타입의 함수를 실행한다.
• runApp은 Widget 을 갖는 함수라는 것을 설명을 통해 알 수 있다.

import 'package:flutter/material.dart';

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

runApp의 타입 확인

• 따라서 runApp함수를 통해 실행되는 Widget은 모든 UI가 실행되는 root가 됨
• App이라는 root클래스를 위젯으로 만들어 runApp에 넘김
• root Widget은 두 가지중 하나를 return 해야 함
  • MaterialApp: Google design system
  • CupertinoApp: Apple design system
  • 구글이나 애플처럼 디자인을 하지 않고 나만의 디자인으로 만들고 싶어도 둘중 하나 선택해야함
  • flutter는 구글이 만들었기 때문에 Material스타일이 Cupertino보다 보기 좋음
  • Material안에 많은 property들이 있지만 가장 먼저 home을 설정
  • 화면은 구조를 가져야 하기 때문에 home은 Scaffold를 갖고 body를 갖음
• Widget을 상속받으면 build메서드를 필수로 지정해야 함
  • build매서드는 return 받는 것을 ui로 보여주는 역할
  • build(BuildContext context)
    • 부모의 인자에 접근하기 위함
    • 부모의 내용을 다 가지고 있다!

#runApp에 들어갈 App widget 생성
import 'package:flutter/material.dart';

void main() {
  runApp(App()); #App이라는 Widget을 runApp에 넘기기
}

#StatelessWidget을 상속
class App extends StatelessWidget {

  #상속받은 StatelessWidget의 build매서드를 커스터마이징 한다.(build 필수로 명시)
  @override
  Widget build(BuildContext context) {    
    return MaterialApp( #app design 설정
      home: Scaffold( #구조 설정
        #appbar설정
        appBar: AppBar(
          title: const Text("Flutter begin"),
        ),
        #body설정
        body: const Text("firtst Flutter ui"),
      ),
    );
  }
}

 

Widget

• flutter는 Widget으로 이루어져 있다.
• Widget들의 모임으로 우리가 보는 UI가 완성된다.
• 결국 class를 만드는 것이다.
• class를 만들고 widget으로 변환시켜 주는 단계를 거친다(widget으로 만들기 위해 flutter에 내장된 3개의 core Widget중 하나를 상속(extend)받아야 함
  • StatelessWidget
    • build매서드를 통해 단순히 UI를 보여줄 뿐 상태는 없음(데이터가 변화하지 않음)

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter begin"),
        ),
        body: const Text("firtst Flutter ui"),
      ),
    );
  }
}

 

• • StatfulWidget
    • 상태를 가지고 있음(데이터의 유무와 데이터의 변화)
    • StatfulWidget 내에서 두 섹터로 나뉨(위젯 그자체를 나타내는 섹터, 데이터와 ui를 변경하는 섹터)
    • 데이터를 변경하는 sector에 데이터를 입력하고 변경하기 위해서는 State에 변경을 알리는 setState함수 필요
    • Widget Recycle: initState() -> build -> dispose() 순으로 실행되는 것
    • initState()
      • 상태를 초기화하기 위한 함수
      • class 내에서 제일 먼저 한번만 실행됨
      • 무조건 build method보다 앞에 있어야 함
    • dispose()
      • 상태를 취소하는 메서드
      • 가장 마지막에 실행됨

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

#----------------- widget그자체인 sector
class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

#------------------ 데이터와 UI가 변경되는 sector
class _AppState extends State<App> {
  
  #가장 먼저 실행되는 initState()
  @override
  void initState() {
  	super.initState();    
  }
  
  #가장 마지막에 실행되는 dispose()
  @override
  void dispose() {
  	super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter begin"),
        ),
        body: const Text("firtst Flutter ui"),
      ),
    );
  }
}