Flutter实战一（框架，轮播图，自定义AppBars滚动渐变）

目录：

1.APP首页框架搭建

2.侧滑抽屉效果 drawer

3.轮播图Banner功能开发

4.自定义AppBar实现滚动渐变

使用到的框架：在pubspec.yaml进行配置

#  Toast 打印

  toast: ^0.1.5

#  网络请求组件

  dio: ^3.0.10

#  轮播图组建

  flutter_swiper: ^1.1.6

重点总结：

底部导航栏：BottomNavigationBar

侧滑动抽屉效果：drawer

轮播图：Swiper

ListView 滚动监听：NotificationListener

删除掉顶部导航栏：MediaQuery.removePadding

透明度：opacity

框架搭建：

图片

TabNavigator：框架页面

import 'package:flutter/material.dart';

import 'package:flutter_app1/module/mine/pages/MinePage.dart';

import 'package:flutter_app1/module/search/pages/SearchPage.dart';

import 'package:flutter_app1/module/travel/TravelPage.dart';

import 'package:flutter_app1/module/home/pages/HomePage.dart';

class TabNavigatorextends StatefulWidget {

@override

  _NavigatorStatecreateState() =>_NavigatorState();

}

class _NavigatorStateextends State {

intcurrentIndex =0;

  final _defultColor = Colors.black;

  final _activeColor = Colors.blue;

  Listlist = [

HomePage(),

    SearchPage(),

    TravelPage(),

    MinePage(),

  ];

  @override

  Widgetbuild(BuildContext context) {

return Scaffold(

body:this.list[this.currentIndex],

      bottomNavigationBar:BottomNavigationBar(

currentIndex:this.currentIndex,

        iconSize:25,

        type: BottomNavigationBarType.fixed,

        onTap: (index){

setState(() {

this.currentIndex=index;

          });

        },

        items: [

BottomNavigationBarItem(

icon:Icon(

Icons.home,

                color:_defultColor,

              ),

              activeIcon:Icon(

Icons.home,

                color:_activeColor,

              ),

              title:Text(

"首页",

                style:TextStyle(

color:currentIndex!=0 ?_defultColor:_activeColor

                ),

              )

),

          BottomNavigationBarItem(

icon:Icon(

Icons.search,

                color:_defultColor,

              ),

              activeIcon:Icon(

Icons.search,

                color:_activeColor,

              ),

              title:Text(

"搜索",

                style:TextStyle(

color:currentIndex!=1 ?_defultColor:_activeColor

                ),

              )

),

          BottomNavigationBarItem(

icon:Icon(

Icons.camera_alt,

                color:_defultColor,

              ),

              activeIcon:Icon(

Icons.camera_alt,

                color:_activeColor,

              ),

              title:Text(

"旅拍",

                style:TextStyle(

color:currentIndex!=2 ?_defultColor:_activeColor

                ),

              )

),

          BottomNavigationBarItem(

icon:Icon(

Icons.account_circle,

                color:_defultColor,

              ),

              activeIcon:Icon(

Icons.account_circle,

                color:_activeColor,

              ),

              title:Text(

"我的",

                style:TextStyle(

color:currentIndex!=3 ?_defultColor:_activeColor

                ),

              )

),

        ],

      ),

      drawer:Drawer(

child:ListView(

padding: EdgeInsets.zero,

          children: [

DrawerHeader(

child:Text("Drawer Header"),

              decoration:BoxDecoration(

color: Colors.blue,

              ),

            ),

            ListTile(

title:Text("item 1"),

              onTap: (){

Navigator.pop(context);

              },

            ),

            ListTile(

title:Text("item 2"),

              onTap: (){

Navigator.pop(context);

              },

            )

],

        ),

      ),

    );

  }

}

HomePage：

import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';

const APPBAR_SCROLLOW_OFFSET =100;

class HomePageextends StatefulWidget {

@override

  _HomePageStatecreateState() =>_HomePageState();

}

class _HomePageStateextends State {

final _imageUrl = [

"https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=e9873bfca944ad342eea8f81e09220cc/a8ec8a13632762d08fa73daea8ec08fa513dc602.jpg",

    "https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=e9873bfca944ad342eea8f81e09220cc/a8ec8a13632762d08fa73daea8ec08fa513dc602.jpg",

    "https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=e9873bfca944ad342eea8f81e09220cc/a8ec8a13632762d08fa73daea8ec08fa513dc602.jpg",

  ];

  doubleappBarAlpha =0;

  _onScroll(offset){

double alpha = offset/APPBAR_SCROLLOW_OFFSET;

    if(alpha<0){

alpha =0;

    }else if(alpha>1){

alpha =1;

    }

setState(() {

appBarAlpha = alpha;

    });

    print(appBarAlpha);

  }

@override

  Widgetbuild(BuildContext context) {

return Scaffold(

body:Stack(

children: [

MediaQuery.removePadding(//删除掉顶部导航栏

            removeTop:true,

            context: context,

            child:NotificationListener(//滑动监听所有的类

// ignore: missing_return

              onNotification:(scrollNotification){

if(scrollNotificationis ScrollUpdateNotification && scrollNotification.depth ==0){

_onScroll(scrollNotification.metrics.pixels);

                }

},

              child:ListView(

children: [

Container(

height:160,

                    child:Swiper(

itemCount:_imageUrl.length,

                      autoplay:true,

                      itemBuilder: (BuildContext context, int index) {

return Image.network(

_imageUrl[index],

                          fit: BoxFit.fill,

                        );

                      },

                      pagination:SwiperPagination(),//指示器

                    ),

                  ),

                  Container(

height:800,

                    child:ListTile(

title:Text("哈哈哈"),

                    ),

                  )

],

              ),

            ),

          ),

          Opacity(

opacity:appBarAlpha,//改变appBar的透明度

            child:Container(

height:80,

              decoration:BoxDecoration(color: Colors.white),

              child:Center(

child:Padding(

padding:EdgeInsets.only(top:20),

                  child:Text("首页"),

                ),

              ),

            ),

          )

],

      ),

    );

  }

}