[Flutter] appBar & bottomNavigationBar & Fluttertoast

 

Flutter 의 머터리얼 앱에서 appBar 와 bottomNavigationBar 사용한 소스입니다.

다음과 같이 머터리얼 UI 구조로 이루어져 있어요!

https://eunoia3jy.tistory.com/99

[Flutter] 프로젝트 구조 / 머터리얼(Material) 앱 기본 형태

 

@override
  Widget build(BuildContext context) {
  
    return new MaterialApp(  // 구글 기본 디자인인 Material Design을 써서 앱을 만든다. 
      home: Scaffold(
        appBar: AppBar( ... ),  //앱의 상단 제목줄
        bottomNavigationBar: BottomNavigationBar( ... ),  //하단 네비게이션 바
        body: Container( ... ),
      ),
    );
  }

}

 

 

appBar

 

leading, actions 을 IconButton 위젯으로 구성하여 아이콘들을 누르면 onPressed: 에서 showToast() 메소드를 통해 Toast 를 띄워주도록 구현하였습니다~

centerTitle: 속성을 통해 제목을 가운데정렬로 맞추고
elevation: 속성을 통해 그림자 효과도 넣었습니당

 

 

 

bottomNavigationBar

 

화면과 같이 bottomNavigationBar 는 Mail, Home, Places, News 네가지로 구성하였고
Flutter 의 기본 Icon들을 사용했답니다.
그리고 해당 아이콘 클릭 시 body 부분에 Text를 표시해주는 형태로 구성하였어요~

 

 

 

Fluttertoast 사용하기

 

pubspec.yaml  

toast 를 띄워주려면 일단 pubspec.yaml 파일에 dependencies 를 추가해줘야 하는데요!

https://pub.dev/packages/fluttertoast

fluttertoast | Flutter Package

여기서 fluttertoast 의 버전을 확인하여 추가해줍니다!
flutter: 와 같은 라인에 fluttertoast: 를 추가해주어야해요~~!
fluttertoast: ^8.0.7

=============== pubspec.yaml ===============

...

dependencies:
  flutter:
    sdk: flutter
  fluttertoast: ^8.0.7
  
...

 

BarPage.dart

그리고 BarPage.dart 로 돌아와서 Fluttertoast.showToast(...) 를 이용하여 toast 를 띄워줍니다!

/* Toast 띄우기 */
  void showToast(String msg) {
    Fluttertoast.showToast(
      msg: msg,
      toastLength: Toast.LENGTH_LONG, 
      // gravity: ToastGravity.CENTER,  //위치(default 는 아래)
    );
  }

 

 

 

전체 소스

 

제가 구현한 BarPage.dart 의 전체 소스입니다.

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

class BarPage extends StatefulWidget {

  const BarPage({ 
    Key? key 
  }) : super(key: key);

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

class _BarPageState extends State<BarPage> {

  int _selectedIndex = 0;
  List _widgetOptions = [
    Text(
      'Mail',
      style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
    ),
    Text(
      'Home',
      style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
    ),
    Text(
      'Places',
      style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
    ),
    Text(
      'News',
      style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
    ),
  ];


  @override
  Widget build(BuildContext context) {
    return new MaterialApp(  // 구글 기본 디자인인 Material Design을 써서 앱을 만든다. 
      home: Scaffold(
        appBar: AppBar(
          title: Text('BarPage'),
          centerTitle: true,  //제목 text 가운데정렬 여부 
          backgroundColor: Colors.pinkAccent,
          leading: IconButton(
            icon: Icon(Icons.menu), 
            onPressed: () => showToast('leading버튼'),
          ),
          actions: [
              IconButton(
                icon: Icon(Icons.search), 
                onPressed: () => showToast('action버튼1'),
              ),
              IconButton(
                icon: Icon(Icons.navigate_next), 
                onPressed: () => showToast('action버튼2'),
              ),
          ],
          elevation: 100,  //appBar 그림자 (0일 경우 그림자 x)
        ),
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.grey,  //Bar의 배경색
          selectedItemColor: Colors.white,  //선택된 아이템의 색상
          unselectedItemColor: Colors.white.withOpacity(.60),  //선택 안된 아이템의 색상
          selectedFontSize: 14,  //선택된 아이템의 폰트사이즈
          unselectedFontSize: 14,  //선택 안된 아이템의 폰트사이즈
          currentIndex: _selectedIndex,  //현재 선택된 Index
          onTap: (int index) {  //bottomNavigationBar 클릭 시 호출
            setState(() {  //setState()를 추가하여 인덱스를 누를때마다 빌드를 다시함
              _selectedIndex = index; //index는 처음 아이템 부터 0, 1, 2, 3
            });
          },
          items: [
            BottomNavigationBarItem(
              title: Text('Mail'),
              icon: Icon(Icons.mail),
            ),
            BottomNavigationBarItem(
              title: Text('Home'),
              icon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              title: Text('Places'),
              icon: Icon(Icons.location_on),
            ),
            BottomNavigationBarItem(
              title: Text('News'),
              icon: Icon(Icons.library_books),
            ),
          ],
        ),
        body: Container(
          child: Center(
            child: _widgetOptions.elementAt(_selectedIndex),
          ),
        ),
        
      ),
    );
  }


  /* Toast 띄우기 */
  void showToast(String msg) {
    Fluttertoast.showToast(
      msg: msg,
      toastLength: Toast.LENGTH_LONG, 
      // gravity: ToastGravity.CENTER,  //위치(default 는 아래)
    );
  }

}

 

 

감사합니당 😬😬😬