Flutter 기본 인터페이스

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Test Page'),
        ),
        body: Center(child: GestureDetector(child: Text('HelloWorld'))),
      ),
    );
  }
}

• MaterialApp: 머티리얼 디자인 적용
• Scaffold: 화면 구조 설계
• AppBar: 화면 위쪽 앱바 구성
• Text: 앱바의 제목
• Cener: 가운데 정렬
• GestureDetector: 사용자 이벤트 처리
• Text: 본문에 문자열 출력

개발자가 만든 위젯은 다음 3가지 클래스 중 하나를 상속받아 작성합니다.

• StatelessWidget: 상태를 관리하지 않는 정적인 위젯
• StatefulWidget: 상태를 관리하는 동적인 위젯
• InheritedWidget: 여러 위젯에서 공통으로 이용할 상태 관리 위젯

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  bool enabled = false;
  String stateText = "disable";

  void changeCheck() {
    if (enabled) {
      stateText = "disable";
      enabled = false;
    } else {
      stateText = "enable";
      enabled = true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateless Test V1'),
        ),
        body: Center(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              icon: (enabled
                  ? Icon(
                      Icons.check_box,
                      size: 15,
                    )
                  : Icon(
                      Icons.check_box_outline_blank,
                      size: 15,
                    )),
              color: Colors.black,
              onPressed: changeCheck,
            ),
            Container(
              padding: EdgeInsets.only(left: 30),
              child: Text(
                '$stateText',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
            )
          ],
        )),
      ),
    );
  }
}

-> checkBox를 클릭해도 변경되지 않습니다(Stateless=> 상태를 갖고 있지 않기 때문)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateful Test V1'),
        ),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool enabled = false;
  String stateText = "disable";

  void changeCheck() {
    setState(() {
      {
        if (enabled) {
          stateText = "disable";
          enabled = false;
        } else {
          stateText = "enable";
          enabled = true;
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            icon: (enabled
                ? Icon(
                    Icons.check_box,
                    size: 15,
                  )
                : Icon(
                    Icons.check_box_outline_blank,
                    size: 15,
                  )),
            color: Colors.red,
            onPressed: changeCheck,
          ),
          Container(
            padding: EdgeInsets.only(left: 30),
            child: Text(
              '$stateText',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),
    );
  }
}

-> 상태를 갖고 있는 Statefull이기 때문에 체크박스 클릭 시 변경됩니다.