플러터

화면구성

다음과 같이 파일 생성

view -> page다트 파일
controller -> 상태 관리 다트 파일
model - > 서버 통신 및 데이터 형태를 정의하는 다트 파일, 통신 기능 구현 다트 파일

widgets -> 해당 페이지에 필요한 위젯들

1. 자식을 가질 수 없는 위젯
   (Text, Image) 등
2. 자식을 하나만 가질 수 있는 위젯
   (MaterialApp, Scaffold, SafeArea)
3. 자식을 여러개 가질 수 있는 위젯
   (Column, Row, LostView)

staless 위젯 - 화면 변경이 안됨
stateful 위젯 - 상태에 따라 화면 변경 됨

stateless 위젯 + 상태 라이브러리 - 상태에 따라 화면 변경
라이브러리 위젯(HookWidget) - 라이브러리

Navigator.pushReplacement

Navigator.pushReplacement 는 푸쉬를 없애고 새페이지로 이동

<pushReplacement 사용시>

<push 사용시>

뒤로가기 버튼이 생김

default 디렉토리

view/default_page.dart, widgets/defulat_first_item.dart, widgets/defulat_second_item.dart

<view/default_page.dart>

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_hrd_page/check/controller/check_controller.dart';
import 'package:flutter_hrd_page/check/view/check_page.dart';
import 'package:flutter_hrd_page/default/widgets/default_first_item.dart';
import 'package:provider/provider.dart';

import '../widgets/default_second_item.dart';

// 페이지 내부의 상태를 관리하기 위해
// HookWidget
// 사용할 수 있는 Hook
// useState
// useEffect 등이 있다
// Hook 은 bulid 함수 안에 적는다
class DefaultPage extends HookWidget {
  DefaultPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final checkController = context.watch<CheckController>();
    List widgetItems = [
          () => DefaultFirstItem(
            checkController.isChecked
          ),
          () => DefaultSecondItem(),
    ];

    final naviIndex = useState(0);
    print("DefaultPage 빌드됨"+ naviIndex.value.toString());
    return Scaffold(
      appBar: AppBar(
        title: Center(child: Text("나의 정보")),
        actions: [
          InkWell(
            onTap: (){
              Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => CheckPage())
              );
            },
            child: Padding(
              padding: const EdgeInsets.only(right: 30),
              child: Icon(Icons.move_to_inbox),
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (int idx){
          naviIndex.value = idx;
        },
        currentIndex: naviIndex.value,
          items:[
            BottomNavigationBarItem(
              icon:Icon(Icons.account_circle_outlined
              ),
              label: "나의정보"
            ),
            BottomNavigationBarItem(
              icon:Icon(Icons.cabin
              ),
              label: "다른정보"
            )
          ]
      ),
      body: SafeArea(
        child: widgetItems[naviIndex.value](),
      ),
    );
  }
}

<widgets/defulat_first_item.dart>

import 'package:flutter/material.dart';

class DefaultFirstItem extends StatelessWidget {
  final bool isChecked;
  const DefaultFirstItem(bool this.isChecked, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.yellow,
      child: Center(
        child: Text("확인 : ${isChecked}"),
      ),
    );
  }
}

<widgets/defulat_second_item.dart>

import 'package:flutter/material.dart';

class DefaultSecondItem extends StatelessWidget {
  const DefaultSecondItem({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue,);
  }
}

check/check_controller.dart, check/check_page.dart

<check/check_controller.dart>

import 'package:flutter/cupertino.dart';

class CheckController extends ChangeNotifier{
  bool _isChecked = false;

  bool get isChecked => _isChecked;

  void change(){
    _isChecked = !_isChecked;
    notifyListeners();
  }
}

<check/check_page.dart>

import 'package:flutter/material.dart';
import 'package:flutter_hrd_page/check/controller/check_controller.dart';
import 'package:provider/provider.dart';

class CheckPage extends StatelessWidget {
  const CheckPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final checkCotroller = context.watch<CheckController>();

    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: Container(
          child: Center(
            child: Column(
              children: [
                Text("체크페이지"),
                ElevatedButton(
                    onPressed: (){
                      checkCotroller.change();
                    },
                    child: Text("값 변경"),
                )
              ],
            ),
          ),
        )
      ),
    );
  }
}

<결과>