달성하기 위해 메인 페이지 하단의 네비게이션 바 테마 및 스타일 설정을 설레게

수입 '패키지 : / material.dart 플러터' ;
수입 '패키지 : / bottom_navigation_widget.dart flutter_app' ; 

보이드 의 main () => runApp (MyApp를 ()); 

클래스 의 MyApp가 확장 StatelessWidget { 

  @Override의 
  위젯 빌드 (BuildContext 컨텍스트) { 
    반환 MaterialApp ( 
      제목 : '떨림 데모' , 
      주제 : ThemeData ( 
        primarySwatch : Colors.green를,   // 定义主题风格primarySwatch 
      ), 
      집 : 새로운 BottomNavigationWidget () 
    ) ; 
  } 

}

수입 '패키지 : / material.dart 플러터' ;
수입 '패키지 : flutter_app / 페이지 / AirplayScreen.dart' ;
수입 '패키지 : flutter_app / 페이지 / EmailScreen.dart' ;
수입 '패키지 : flutter_app / 페이지 / HomeScreen.dart' ;
수입 '패키지 : flutter_app / 페이지 / PagesScreen.dart' ; 


클래스 BottomNavigationWidget는 연장 StatefulWidget { 
  _BottomNavigationWidgetState createState () => _BottomNavigationWidgetState (); 
} 

클래스 _BottomNavigationWidgetState는 확장 주 <BottomNavigationWidget> {
 //  최종 _BottomNavigationColor = Colors.blue; 
  INT _currentIndex = 0 ; 
  목록 <위젯> 목록 = 목록 (); 
  @Override 
  공극 initState () { 
    리스트 
      ..add (홈 화면 ()) 
      ..add (EmailScreen ()) 
      ..add (PagesScreen ()) 
      ..add (AirplayScreen ()); 
    슈퍼 .initState (); 
  } 
  @Override의 
  위젯 빌드 (BuildContext 컨텍스트) { 
    복귀 발판 ( 
      본체리스트 [_currentIndex, 
      bottomNavigationBar : BottomNavigationBar ( 
          상품 : 
            BottomNavigationBarItem (  
                아이콘 : 아이콘 (
                  Icons.home,
//                   색상 : _BottomNavigationColor, 
                ) 
                제목 : 텍스트 (
                     '홈' ,
 //                     스타일 : 텍스트 스타일 (색상 : _BottomNavigationColor) 
                ) 
            ), 
            BottomNavigationBarItem ( 
                아이콘 : 아이콘 ( 
                  Icons.email, 
//                   색상 : _BottomNavigationColor, 
                ) 
                제목 : 텍스트 (
                     '이메일' ,
 //                     스타일 : 텍스트 스타일 (색상 : _BottomNavigationColor) 
                )  
            )
            BottomNavigationBarItem (
                아이콘 : 아이콘 ( 
                  Icons.pages, 
//                   색상 : _BottomNavigationColor, 
                ) 
                제목 : 텍스트 (
                     '페이지' ,
 //                     스타일 : 텍스트 스타일 (색상 : _BottomNavigationColor) 
                ) 
            ), 
            BottomNavigationBarItem ( 
                아이콘 : 아이콘 ( 
                  Icons.airplay, 
//                   색상 : _BottomNavigationColor, 
                ) 
                제목 : 텍스트 (
                     'AipPlay' ,
 //                     스타일 : 텍스트 스타일 (색상 : _BottomNavigationColor) 
                )
            ) 
          ] 
          currentIndex : _currentIndex, 
          ONTAP :( INT의 인덱스) { 
            setState를 (() { 
              _currentIndex = 인덱스; 
            }); 
          }, 
          selectedItemColor : Colors.green, 
//           unselectedItemColor : Colors.grey, 
          유형 : BottomNavigationBarType.fixed 
      ) 
    ); 
  } 
}

HomeScreen.dart 

수입 '패키지 : / material.dart 플러터' ; 

클래스 의 홈 화면은 확장 StatelessWidget { 
  @Override 
  위젯 빌드 (BuildContext 컨텍스트) { 
    반환 (비계 
        : AppBar (appBar 
          제목 : 텍스트 ( '홈' ), 
        ), 
        몸 : 센터 ( 
          아이 : 텍스트 ( '홈' ) 
        ) 
    ); 
  } 
}

기타 유사한 페이지

효과 :