Flutter_11. Drawer, ListTitle, Navigator, body, class, Stateful

오늘은 지난번 포스팅에 이어서 Drawer에 리스트를 만들고 페이지 이동을 시켜보도록 하겠다.

 

2023.05.04 - [개발하기] - Flutter_10. Drawer, AppBar IconButton

Flutter_10. Drawer, AppBar IconButton

 

 

 

---

Routing, Drawer, ListView

 

 

 

1) 폴더 "page"에 파일 추가하고, main.dart 파일에 Routing 셋팅

 

 

2) home.dart 파일 > Drawer - Header 만들기 복습 메모!

UserAccountsDrawerHeader
- 메인 이미지 currentAccountPicture: CircleAvatar
- 서브 이미지 otherAccountsPictures: [CircleAvatar, CircleAvatar, ...]
- 계정 네이밍 accountName: Text
- 계정 이메일 accountEmail: Text
- 꾸미기 decoration: BoxDecoration()

 

 

3) home.dart 파일 > Drawer - ListTitle 만들기

ListTitle
- 아이콘 leading: Icon
- 리스트 title: Text
- 아이콘 trailing: Icon
- 클릭 이벤트 onTap: (){}

 

 

4) Navigator.pop으로 탭하면 Drawer 닫힘 처리

    ListTile(

    leading: const Icon(

        Icons.label_important_outline_rounded,

        color: Color.fromARGB(255, 70, 12, 81),

    ),

    title: const Text('01 - Image Swipe'),

    trailing: const Icon(

        Icons.arrow_right

    ),

    onTap: () {

       Navigator.pop(context);

        },

    ),

 

 

5) 저장하고 Drawer 클릭 확인! 이상이 없다면, ListTitle 복사~*-*// 

#Navigator.pop으로 닫고, pushNamed로 이동 경로 설정

    onTap: () {

        Navigator.pop(context);

        Navigator.pushNamed(context, '/page01');

    },

 

 

 

6) 저장하고 Drawer 클릭과 페이지 이동 확인!

 

 

 

 

 

body, class, StatefulWidget

 

 

Stateless로 home.dart 파일을 만들고, Drawer를 넣었더니 코드가 조금 길어졌다.

그리고, 홈메인에 첫번째로 복습하고자 하는 것이 이미지 스와이프 화면임으로 움직임 변화가 있는 위젯이 필요했다.

그래서 body를 별도의 Stateful 파일로 분리해보았다. 방법은 간단했다 :)

• Stateless : 상태가 없는 정적 위젯
• Statefull : 움직임 변화가 있는 위젯

 

 

1) home.dart 파일 body에 const로 class 이름 "ImageSwipe"로 넣기

 

2) img_swipe.dart 파일 신규 생성

3) sateful로 class 만들고, return에 body의 Center부터 내용 추가

- stf + Enter : StatefulWidget으로 기본 양식 자동출력
- 클래스 이름 "ImageSwipe"로 변경
- 자동 생성된 import 지우고, material 추가
- 리턴값 Center();로 변경하고, home.dart의 Center내용 짤라서 붙여넣기

 

저장하고 확인하면, 파일만 분리되었고 화면은 그대로:)

 

 

 

 

 

 

 

Stateful Life Cycle

 

 

💋 Stateless Widgets

Constructor Function -> build()

 

💋 Stateful Widgets의 Life Cycle

Constructor Function -> initState() -> build() -> setState() -> didUpdateWidget() -> build()

initState() : 상태 초기화(=변수 정의)
build() : 만들고
setState() : 상태 갱신 -> build()

 

아래 코드를 실행해보면, initState()는 최초 1회만 실행된다.

버튼 클릭에 따라 상태가 변경되며, 상태가 변경될 때마다 setState를 통해 build()되는 것을 확인할 수 있다.

import 'package:flutter/material.dart';

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {


  // 1. 필드에 (전역)변수 late로 선언
  late String _buttonState;
  late Color _buttonColor;

  // 2. initState : 초기값 설정(앱 처음 실행할때만 run)
  @override
  void initState() {
    super.initState();
    print('initState()');
    _buttonState = "OFF";
    _buttonColor  = Colors.amber;
  }


  @override
  void deactivate() {
    print('deactivate()');
    super.deactivate();
  }

  // 3. dispose : 앱이 종료정의
  @override
  void dispose() {
    print('dispose()');
    super.dispose();
    
  }


  @override
  Widget build(BuildContext context) {
    print('build()');
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Life Cycle'),
        backgroundColor: const Color.fromARGB(255, 98, 104, 255),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(_buttonColor)
              ),
              onPressed: () {
                // -------------
                _onClick();
                
              }, 
              child: const Text('버튼을 누르세요'),
              ),
              const SizedBox(
                height: 50,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('버튼 상태 :'),
                  const SizedBox(
                    width: 10,
                  ),
                  Text(_buttonState)
                ],
              )

          ],
        ),
      ),
    );
  }

  // --- Functions ---
  _onClick(){
    // setState : build한테 변수 변경 알려주기!
    setState(() {
      if(_buttonState == "OFF"){
        _buttonState = 'ON';
        _buttonColor  = Colors.red;
      }else{
        _buttonState = 'OFF';
        _buttonColor  = Colors.amber;
      }
      
    });
    print(_buttonState);
  }

}//End

 

 

반응형