본문 바로가기

IT/flutter

Flutter 복습 - 기본 템플릿

반응형
import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
     home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: const Center(
        child:
            Text("Hello World"),
        ),
      );
  }
}

1. 프로그램은 main 에서 시작한다.

2. 플러터는 모두 위젯으로 이루어져있다. 위젯은 크게 스테이트풀 위젯과 스테이트리스 위젯으로 나뉜다.

3. 스테이트리스 위젯 => 상태값을 가지지 않고있다. 값이바뀌었다고 화면이 업뎃되지 않는다. 

그래서 build 함수만 구현하면 되는 단순한 구조이다. 

4. 스테이트풀 위젯 => 상태값을 가지고 있어서 값이 있으면 화면을 다시그리도록 되어 있다. 

상태값을 가지기 위해 createState 을 구현해야 하며, createState 는 State 를 구현한 클래스와 연결된다. 

5. 스테이트풀 위젯 하위의 스테이트리스 위젯은 스테이트풀위젯이 다시그려지면 같이 다시 그려진다. 

6. 기본적인 앱은 위와 같은 구조가 되고 아래같이 정리할 수 있다. 

main -> MyApp(Stateless) ->  MyHomePage(Stateful)

 

-> MyHomePageState(State) 

--- MaterialApp 

-- Scaffold -- AppBar -- title - Text

                 | 

                 -- body -- Center -- child --  Text

 

 

반응형