[Flutter] Stateless 위젯을 Stateful 위젯으로 바꿔보기

 

Content

---

 

 

 

해당 화면은 위젯을 색성하고 삭제가 가능하며 색바꾸기를 누르면 다른 색으로 변경이 된다.

 

StatelessWidget으로 구현한 코드

main.dart 파일

import 'package:flutter/material.dart';
import 'package:flutter_lifecycle/screen/home_screen.dart';

void main() {
  runApp(MaterialApp(
    home: Root(),
  ));
}

class Root extends StatefulWidget {
  const Root({Key? key}) : super(key: key);

  @override
  _RootState createState() => _RootState();
}

class _RootState extends State<Root> {
  Color color = Colors.purple;
  bool show = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 100.0),
          child: Column(
            children: [
              Expanded(
                child: Center(
                  child: show
                      ? HomeScreen(
                          color: color,
                        )
                      : Container(),
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      setState(() {
                        color = color == Colors.orange
                            ? Colors.purple
                            : Colors.orange;
                      });
                    },
                    style: ElevatedButton.styleFrom(primary: Colors.amber[600]),
                    child: Text(
                      '색 바꾸기',
                    ),
                  ),
                  const SizedBox(height: 10.0),
                  ElevatedButton(
                    onPressed: () {
                      setState(() {
                        show = !show;
                      });
                    },
                    style: ElevatedButton.styleFrom(primary: Colors.amber[700]),
                    child: Text(
                      !show ? '위젯 생성' : '위젯 삭제',
                    ),
                  ),
                  const SizedBox(height: 100.0),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

home_screen.dart 파일

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  final Color color;

  const HomeScreen({
    required this.color,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150.0,
      height: 150.0,
      color: color,
    );
  }
}

 

폴더 구조

 

---

 

StatefulWidget으로 바꾸어 구현해보기

 

StatefulWidget 구조 만들기

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

State<HomeScreen> createState() => _HomeScreenState();

• StatefulWidget을 사용하려면 2개의 클래스를 구성해야 하는데 하나는 createState가 가능한 class와 State class를 생성해준다. 위에서 보는 바와 같이 2개의 클래스가 있다.
• StatefulWidget에 해당되는 클래스는 외부에서 사용이 되는데, State 같은 경우에는 StatefulWiget에 바인딩이 되어서 내부에서 쓰이기 때문에, ' _ ' 기호를 넣어 private 하게 만들어준다.

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

• State 같은 경우에는 State<>와 같이 제너릭을 만들어줘야 하는데, 괄호 안에 바인딩을 할 Stateful Widget 클래스를 넣어주면 된다.

 

 

 

 

라이프사이클에 대한 이해가 부족하다면 아래의 글을 참고하도록 하자.

[Flutter] 위젯 라이프사이클

[Flutter] 위젯 라이프사이클 / StatelessWidget, StatefulWidget LifeCycle 함수 메서드 정리

 

 

---

 

StatefulWidget으로 작성된 코드

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  final Color color;

  const HomeScreen({
    required this.color,
    Key? key,
  }) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150.0,
      height: 150.0,
      color: widget.color,
    );
  }
}

• State 같은 경우에 값을 받아오기 위해서는 다른 클래스에서 받기 때문에 기존의 방식대로 가져오지 못 하고, State 클래스는 Stateful Widget 클래스를 extends 해오기 때문에, 내부에 widget. 이라는 키워드를 사용해 가져온다.

 

 

 

위에서 언급한 StatelessWidget으로 작성된 코드이다. 차이점을 비교하면서 공부를 해보자.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  final Color color;

  const HomeScreen({
    required this.color,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150.0,
      height: 150.0,
      color: color,
    );
  }
}