Flutter开发怎么实现底部留言板

这篇文章主要介绍“Flutter开发怎么实现底部留言板”，在日常操作中，相信很多人在Flutter开发怎么实现底部留言板问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Flutter开发怎么实现底部留言板”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

主要技术

其实这个技术就是运用了动画这个功能封装实现的

实例代码分析

初始化封装

   initState() {    super.initState();        controller = new AnimationController(        duration: const Duration(milliseconds: 1000),        vsync: this);        tween = new Tween(begin: 0.0, end: 1.0)        .animate(controller)    //返回Animation对象      ..addListener(() {        //添加监听        setState(() {          Provide.value<IndexProvide>(context).changHeight(tween.value);         // print(tween.value);   //打印补间插值        });      });    // controller.forward();       //执行动画  }

全部代码

import 'package:flutter/material.dart';void main(){  runApp(    MaterialApp(      debugShowCheckedModeBanner: false,      home: cityContent(),    )  );}class cityContent extends StatefulWidget {  cityContent({Key key}) : super(key: key);  _cityContentState createState() => _cityContentState();}class _cityContentState extends State<cityContent> with SingleTickerProviderStateMixin{  Animation<double> tween;  AnimationController controller;    initState() {    super.initState();        controller = new AnimationController(        duration: const Duration(milliseconds: 1000),        vsync: this);        tween = new Tween(begin: 0.0, end: 1.0)        .animate(controller)    //返回Animation对象      ..addListener(() {        //添加监听        setState(() {          Provide.value<IndexProvide>(context).changHeight(tween.value);         // print(tween.value);   //打印补间插值        });      });    // controller.forward();       //执行动画  }  @override  Widget build(BuildContext context) {    return Scaffold(        body: Stack(        children: <Widget>[          InkWell(              onTap: (){                // 动作反方向执行，即关闭留言板                controller.reverse();              },            child:  ListView(              children: <Widget>[                Center(                child: InkWell(                  onTap: (){                    controller.forward();       //执行动画，即打开留言板                  },                  child: Text(                    '打开底部抽屉'                  ),                )              ),              ],            ),          ),          Positioned(            bottom: 0,            child: Container(              margin: EdgeInsets.fromLTRB(20, 0, 20, 0),              height: 400*controller.value,              width: 300,              color: Colors.grey.shade300,              child: ListView(              // physics: NeverScrollableScrollPhysics(),              children: <Widget>[                Container(                  margin: EdgeInsets.only(left: 240),                  child: InkWell(                    onTap: (){                      // 动作反方向执行，即关闭留言板                      controller.reverse();                    },                    child: Icon(Icons.clear),                  )                ),                Center(                  child: Text('留言列表'),                )              ],            ),          )        ),        ],      )    );  }}

到此，关于“Flutter开发怎么实现底部留言板”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！