flutter 底部导航

main.dart

import 'package:flutter/material.dart';

import 'bottom_navigationn_wdget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter bottmNavigatinBar',
      theme: ThemeData.light(),
      home: BottomNavigationWidgeet(),
    );
  }
}

bottom_navigationn_wdget.dart

import 'package:flutter/material.dart';

import 'pages/airplay_screen.dart';
import 'pages/pages_screen.dart';
import 'pages/home_screen.dart';
import 'pages/email_screen.dart';

class BottomNavigationWidgeet extends StatefulWidget {
  BottomNavigationWidgeet({Key key}) : super(key: key);

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

class _BottomNavigationWidgeetState extends State {
  final _BottomNavigatinColor = Colors.red;

  int _currentIndex = 0;

  List pageslist = List();

  @override
  void initState() {
    pageslist
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(PagesScreen())
      ..add(AirplayScreen());

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pageslist[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: _BottomNavigatinColor,
            ),
            label: 'home',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.email,
              color: _BottomNavigatinColor,
            ),
            label: 'Email',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.pages,
              color: _BottomNavigatinColor,
            ),
            label: 'pages',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.airplay,
              color: _BottomNavigatinColor,
            ),
            label: 'airplay',
          )
        ],
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        selectedItemColor: _BottomNavigatinColor,
      ),
    );
  }
}


pages/airplay_screen.dart


import 'package:flutter/material.dart';

class AirplayScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Airplay'),
      ),
      body: Center(
        child: Text('Airplay'),
      ),
    );
  }
}


pages/pages_screen.dart



import 'package:flutter/material.dart';

class PagesScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pages'),
      ),
      body: Center(
        child: Text('Pages'),
      ),
    );
  }
}


pages/home_screen.dart



import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Home'),
      ),
    );
  }
}



pages/email_screen.dart



import 'package:flutter/material.dart';

class EmailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Email'),
      ),
      body: Center(
        child: Text('Email'),
      ),
    );
  }
}



效果

 

 

例子下载  https://share.weiyun.com/gcwIO2MX

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注