TAB NAVIGATION 6.1 pushAndRemoveUntil 6.2 BottomNavigationBar 6.3 NavigationBar 6.4 CupertinoTabBar

6.1 pushAndRemoveUntil

 

login_formscreen.dart에서        

여기서 push는 이전 화면(로그인)에 덧대어 화면 표시됨. 이는 뒤로가기 버튼등으로 로그인 페이지로 다시 돌아가게 되는 것
그래서 대신 써줄게 pushAnd RemoveUntil(한 번 로그인 하면 그 전 화면관련 데이터 지워)

  Map<String, String> formData = {};

  //이메일과 비번을 적절한 포맷으로 넣었는지 체크하는 함수(유효성 검사2)
  // _formkey.currentState null이 아니고 validate()가 true라면 email,pass폼을 저장한다.
  void _onSubmitTap() {
    if (_formkey.currentState != null) {
      if (_formkey.currentState!.validate()) {
        _formkey.currentState!.save();
        //print(formData.values);
        
        
 ------------------       
        //여기서 push는 이전 화면(로그인)에 덧대어 화면 표시됨. 이는 뒤로가기 버튼등으로 로그인 페이지로 다시 돌아가게 되는 것
        //그래서 대신 써줄게 pushAnd RemoveUntil(한 번 로그인 하면 그 전 화면관련 데이터 지워)
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => const InterestsScreen(),
  ------------------       
 
          ),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {

여기서 route(이전 화면)을 true로 했을 경우와 false로 했을 경우를 비교하면

 

 

signup->username-> email -> password - birthday -> interests로 이동하는데 여기서도 뒤로 가면 안되니까

마지막으로 여기도 이와 같이 수정하고

main_navigation_screen.dart에 적용

import 'package:flutter/material.dart';

class MainNavigationScreen extends StatelessWidget {
  const MainNavigationScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold();
  }
}

 

6.2 BottomNavigationBar

 

main_navigation_screen.dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MainNavigationScreen extends StatelessWidget {
  const MainNavigationScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.house),
            label: "Home",
            tooltip: "What are you?",
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.magnifyingGlass),
            label: "Search",
            tooltip: "What are you?",
          ),
        ],
      ),
    );
  }
}

 

 

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


--------------
  int _selectedIndex = 0;

  final screens = [
    const Center(
      child: Text("home"),
    ),
    const Center(
      child: Text("Screen"),
    )
  ];

  void _onTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
--------------

--------------
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onTap,
        selectedItemColor: Theme.of(context).primaryColor,
    --------------    
 
}

 

 

    return Scaffold(
    -----------------
      body: screens[_selectedIndex],
          -----------------
          
      bottomNavigationBar: BottomNavigationBar(

 

하지만 이 애니메이션은 items list에 4개 이상의 items가 들어 있을 때만 가능

  final screens = [
    const Center(
      child: Text("home"),
    ),
    const Center(
      child: Text("Screen"),
    ),
    const Center(
      child: Text("home"),
    ),
    const Center(
      child: Text("Screen"),
    ),
    const Center(
      child: Text("home"),
    ),
  ];
  
  
  ------------------
  
          currentIndex: _selectedIndex,
        onTap: _onTap,
        //selectedItemColor: Theme.of(context).primaryColor,
        items: const [
        
          ------------------
          BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.house),
              label: "Home",
              tooltip: "What are you?",
              backgroundColor: Colors.amber),
          BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.magnifyingGlass),
              label: "Search",
              tooltip: "What are you?",
              backgroundColor: Colors.blue),
          BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.house),
              label: "Home",
              tooltip: "What are you?",
              backgroundColor: Colors.pink),
          BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.magnifyingGlass),
              label: "Search",
              tooltip: "What are you?",
              backgroundColor: Colors.yellow),
          BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.house),
              label: "Home",
              tooltip: "What are you?",
              backgroundColor: Colors.teal),
        ],
      ),
        ------------------

 

하지만 강제적으로 설정할 수 있다.

이거는 그냥 데폴트 표시

shifting으로 바꿔줘서 강제 표시

여기까지는 https://m2.material.io/components/bottom-navigation

 

6.3 NavigationBar

지금부터 해볼 건 https://m3.material.io/components/navigation-bar/overview

 

 

 

6.4 CupertinoTabBar

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: const [
          BottomNavigationBarItem(
            icon: FaIcon(
              CupertinoIcons.house,
            ),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: FaIcon(
              CupertinoIcons.search,
            ),
            label: "Search",
          ),
        ],
      ),
      tabBuilder: (context, index) => screens[index],
    );
  }
}

 

좀 더 애플 스러운 디자인 하려면 main.dart를 바꿔줘야한다.

materialApp-> CupertinoApp으로 랜더링 해주게끔

 

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'TikTok Clone',
      // theme: ThemeData(
      //   // 자세히 보면 scaffold는 약간 회색빛을 띄는데 이게 짜증나니 여기서 강제 흰색으로 지정
      //   scaffoldBackgroundColor: Colors.white,
      //   primaryColor: const Color(0xFFE9435A),
      //   // appBar에서 글씨 지정하는 것도 어느정도 고정이니 여기서 전역적으로 지정하자
      //   appBarTheme: const AppBarTheme(
      //     foregroundColor: Colors.black,
      //     backgroundColor: Colors.white,
      //     // appbar와 navigationbar의 경계에 있는 그림자 수치
      //     elevation: 0,
      //     titleTextStyle: TextStyle(
      //       color: Colors.black,
      //       fontSize: Sizes.size16 + Sizes.size2,
      //       fontWeight: FontWeight.w600,
      //     ),
      //   ),
      // ),
      home: MainNavigationScreen(),
    );
  }
}