Flutter for 微信demo

• 微信Tabbar&Navigator

  
  
  image.png

import 'package:flutter/material.dart';

class App extends StatefulWidget {
  @override
  MainState createState() => MainState();
}

class MainState extends State<App> {
  var _currentIndex = 0;

  _popupMenuItem(String title, {String imagePath, IconData icon}) {
    return PopupMenuItem(
      child: Row(
        children: <Widget>[
          imagePath != null
              ? Image.asset(
                  imagePath,
                  width: 32.0,
                  height: 32.0,
                )
              : SizedBox(
                  width: 32.0,
                  height: 32.0,
                  child: Icon(
                    icon,
                    color: Colors.white,
                  ),
                ),
          Container(
            padding: const EdgeInsets.only(left: 20),
            child: Text(
              title,
              style: TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('微信'),
        actions: <Widget>[
          GestureDetector(
            onTap: () {
              Navigator.pushNamed(context, 'search');
            },
            child: Icon(
              Icons.search,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0, right: 20.0),
            child: GestureDetector(
              onTap: () {
                showMenu(
                  context: context,
                  position: RelativeRect.fromLTRB(500.0, 86.0, 25.0, 0.0),
                  items: <PopupMenuEntry>[
                    _popupMenuItem('發(fā)起群聊',
                        imagePath: 'images/2x/wechat@2x.png'),
                    _popupMenuItem('掃一掃')
                  ],
                );
              },
              child: Icon(Icons.add_a_photo),
            ),
          )
        ],
      ),
      bottomNavigationBar: new BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: ((index) {
          setState(() {
            _currentIndex = index;
          });
        }),
        items: [
          new BottomNavigationBarItem(
              title: new Text(
                '微信',
                style: TextStyle(
                    color: _currentIndex == 0
                        ? Color(0xFF03c40e)
                        : Color(0xff999999),
                    fontSize: 14.0),
              ),
              icon: _currentIndex == 0
                  ? Image.asset(
                      'images/2x/messageSel@2x.png',
                      width: 32.0,
                      height: 28.0,
                    )
                  : Image.asset(
                      'images/2x/messageNol@2x.png',
                      width: 32.0,
                      height: 28.0,
                    )),
          new BottomNavigationBarItem(
              title: new Text(
                '通訊錄',
                style: TextStyle(
                    color: _currentIndex == 1
                        ? Color(0xFF03c40e)
                        : Color(0xff999999),
                    fontSize: 14.0),
              ),
              icon: _currentIndex == 1
                  ? Image.asset(
                      'images/2x/messageSel@2x.png',
                      width: 32.0,
                      height: 28.0,
                    )
                  : Image.asset(
                      'images/2x/messageNol@2x.png',
                      width: 32.0,
                      height: 28.0,
                    )),
          new BottomNavigationBarItem(
              title: new Text(
                '發(fā)現(xiàn)',
                style: TextStyle(
                    color: _currentIndex == 2
                        ? Color(0xFF03c40e)
                        : Color(0xff999999),
                    fontSize: 14.0),
              ),
              icon: _currentIndex == 2
                  ? Image.asset(
                      'images/2x/messageSel@2x.png',
                      width: 32.0,
                      height: 28.0,
                    )
                  : Image.asset(
                      'images/2x/messageNol@2x.png',
                      width: 32.0,
                      height: 28.0,
                    )),
          new BottomNavigationBarItem(
              title: new Text(
                '我的',
                style: TextStyle(
                    color: _currentIndex == 3
                        ? Color(0xFF03c40e)
                        : Color(0xff999999),
                    fontSize: 14.0),
              ),
              icon: _currentIndex == 3
                  ? Image.asset(
                      'images/2x/messageSel@2x.png',
                      width: 32.0,
                      height: 28.0,
                    )
                  : Image.asset(
                      'images/2x/messageNol@2x.png',
                      width: 32.0,
                      height: 28.0,
                    ))
        ],
      ),
      // body: currentPage(),
    );
  }
}