플러터 - 동적 화면 생성

플러터의 위젯 생성 시 상속받는 클래스 종류

1. StatelessWidget : 상태를 관리하지 않는 정적인 위젯

2. StatefulWidget : 상태를 관리하는 동적인 위젯

3. InheritedWidget : 여러 위젯에서 공통으로 이용할 상태 관리 위젯

 

 

동적 화면 생성 코드

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')),
        body: MyWidget(),
      ),
    );
  }
}

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

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

  void changeCheck() {
    // setState가 호출되어야 화면을 재빌드하여 상태값이 변경된다. 중요!
    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: 20)
                    : Icon(Icons.check_box_outline_blank, size: 20)),
            color: Colors.red,
            onPressed: changeCheck,
          ),
          Container(
            padding: EdgeInsets.only(left: 16),
            child: Text(
              '$stateText',
              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),
    );
  }
}

 

 

체크박스를 클릭하면 상태가 바뀐다.

(체크 전)

 

 

(체크 후)