[Flutter] Navigation 네비게이션 정리

다른 페이지 위젯으로 이동

Navigator.push(context, MaterialPageRoute(builder: (context) => [이동할 페이지 위젯],))

 

 

다른 페이지 위젯에서 복귀

: result 'ok'한 값을 optional

Navigator.pop(context, 'ok');

final result = await Navigator.push(context, MaterialPageRoute(builder: (context) => [page],))

 

 

MaterialApp내부 routes에 저장

return MaterialApp(
  home: Scaffold(
    body: Column(
      children: [
        ElevatedButton(
          onPressed: () async {
            final result = await Navigator.pushNamed(context, '/first');
          },
          child: Text(''),
        ),
      ],
    ),
  ),
  routes: {
    '/first' : (context) => FirstPage(),
    '/second': (context) => SecondPage(),
  },
);

 

---

BottomNavigation

TabController? controller;

@override
void initState() {
  super.initState();

  controller = TabController(length: 2, vsync: this);

  controller!.addListener(tabListener);
}

@override
void dispose() {
  controller!.removeListener(tabListener);
  super.dispose();
}

void tabListener() {
  setState(() {

  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: TabBarView( // 탭 화면을 보여줄 위젯
      controller: controller,
      children: renderChildren(),
    ),
    bottomNavigationBar: renderBottomNavigation(),
  );
}

List<Widget> renderChildren() {
  return [
    Container(
      child: Center(
        child: Text(
          'Tab 1',
          style: TextStyle(
            color: Colors.white
          ),
        ),
      ),
    ),
    Container(
      child: Center(
        child: Text(
          'Tab 2',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ),
  ];
}

BottomNavigationBar renderBottomNavigation() {
  return BottomNavigationBar(
    currentIndex: controller!.index,
    onTap: (value) {
      setState(() {
        controller!.animateTo(value);
      });
    },
    items: [
      BottomNavigationBarItem(
        icon: const Icon(Icons.edgesensor_high_outlined),
        label: '주사위'
      ),
      BottomNavigationBarItem(
        icon: const Icon(Icons.settings),
        label: '설정'
      ),
    ],
  );
}