浏览了n篇flutter精华文章后，总结了这份Flutter实用入坑指南

最新推荐文章于 2024-08-27 08:41:46 发布

阿尔法789

最新推荐文章于 2024-08-27 08:41:46 发布

阅读量1.2k

点赞数

分类专栏： Android进阶学习 Android优化 Android 文章标签：程序员 Android flutter IT 指南

本文链接：https://blog.csdn.net/Aerfa789/article/details/103526085

版权

本文是作者在学习Flutter两周后，根据实际经验总结的Flutter实用技巧，涵盖Scaffold属性、底部导航、自定义AppBar、图片处理、数组组件、手势识别、HTTP请求、时间控制等多个方面，适合初学者快速入门。

摘要由CSDN通过智能技术生成

开篇

一如前端深似海，从此节操是路人，从此再无安宁日，从此红尘是路人。要说技术更迭速度，还有比前端更快的么，根本停不下来。
这不，Google刚发布Flutter不到一年时间，1.0正式版发布不到两个月。阿里系的闲鱼老大哥，已经率先用Flutter重构了闲鱼，虽然没完全重构，但高频的重度页面都是Flutter的了。
这一幕似曾相识，当初RN出来的时候不也是闲鱼团队先吃的螃蟹吗，在这里向闲鱼团队的老哥们致敬🐣。

既然老大哥都出动了，也侧面验证了这项技术的可行性。当小弟的也不能落后嘛，每天抽时间断断续续的学了两周时间，仿部分知乎的客户端，撸了一套客户端出来。前一周主要是熟悉Dart语言和常规的客户端布局方式，后一周主要是掌握使用HTTP的请求、下拉上拉、左滑右滑、长按等常用手势、相机调用、video播放等进阶用法。两周下来，基本上可以开发80%以上常见的客户端需求。

前期一直在用simulator开发，略有卡顿，心中难免有些疑惑。结果最后release打包到手机后，竟然如丝般顺滑！！！简直喜出望外，完全可以睥睨原生开发，在这一点上的确要优于目前的RN

最重要的是作为Materail Design极简又有质感风格的鸭狗血粉丝，Flutter造出来的界面简直倍爽。至此正式入坑Flutter开发。Google万岁！

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

这里把学习过程中一些常用高频的东西总结出来，基本能满足大多数情况下的开发需求。

学习flutter的视频有需要就看这里学习视频

Scaffold 主要的属性说明

appBar：显示在界面顶部的一个 AppBar
body：当前界面所显示的主要内容
floatingActionButton：在 Material 中定义的一个功能按钮。
persistentFooterButtons：固定在下方显示的按钮。 https://material.google.com/c…
drawer：侧边栏控件
bottomNavigationBar：显示在底部的导航栏按钮栏。可以查看文档：Flutter学习之制作底部菜单导航
backgroundColor：背景颜色
resizeToAvoidBottomPadding：控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

底部菜单 bottomNavigationBar，Tab栏切换 TabBar

TabController controller;

  @override
  void initState() {
    super.initState();

    // initialize the tab controller
    // vsync ??
    controller = new TabController(length: 5, vsync: this);
  }

  @override
  void dispose() {
    // dispose of tab controller
    controller.dispose();
    super.dispose();
  }
  
  ...
  
  body: new TabBarView(
    children: <Widget>[new HomeTab(), new IdeaTab(), new ColleagueTab(), new MessageTab(), new MeTab()],
    controller: controller,
  ),
  bottomNavigationBar: new Material(
    // background color of bottom navigation bar
    color: Colors.white,
    textStyle: new TextStyle(
      color: Colors.black45
    ),
    child: new TabBar(
      unselectedLabelColor: Colors.black45,
      labelColor: Colors.blue,
      controller: controller,
      tabs: <Tab>[
        new Tab(
          child: new Container(
            padding: EdgeInsets.only(top: 5),
            child: new Column(
              children: <Widget>[
                Icon(Icons.home, size: 25,),
                Text('首页', style: TextStyle(fontSize: 10),)
              ],
            ),
          ),
        ),
        new Tab(
          child: new Container(
            padding: EdgeInsets.only(top: 5),
            child: new Column(
              children: <Widget>[
                Icon(Icons.access_alarm, size: 25,),
                Text('想法', style: TextStyle(fontSize: 10),)
              ],
            ),
          ),
        ),
        new Tab(
          child: new Container(
            padding: EdgeInsets.only(top: 5),
            child: new Column(
              children: <Widget>[
                Icon(Icons.access_time, size: 25,),
                Text('大学', style: TextStyle(fontSize: 10),)
              ],
            ),
          ),
        ),
        new Tab(
          child: new Container(
            padding: EdgeInsets.only(top: 5),
            child: new Column(
              children: <Widget>[
                Icon(Icons.account_balance_wallet, size: 25,),
                Text('消息', style: TextStyle(fontSize: 10),)
              ],
            ),
          ),
        ),
        new Tab(
          child: new Container(
            padding: EdgeInsets.only(top: 5),
            child: new Column(
              children: <Widget>[
                Icon(Icons.adb, size: 25,),
                Text('我的', style: TextStyle(fontSize: 10),)
              ],
            ),
          ),
        ),
      ],
    ),
  ),

效果：

顶栏自定义 appbar：title属性顶部搜索栏

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: searchBar(),
        backgroundColor: Colors.white,
        bottom: new Text('bottom'),
      ),
      body: new Container()
    );
  }

  /**
   * 顶部搜索栏
   */
  Widget searchBar() {
    return new Container(
      child: new Row(
        children: <Widget>[
          new Expanded(
            child: new FlatButton.icon(
              color:Color.fromRGBO(229, 229, 229, 1.0),
              onPressed: (){
                Navigator.of(context).push(new MaterialPageRoute(builder: (context){
                  return new SearchPage();
                }));
              },
              icon: new Icon(
                Icons.search,
                color: Colors.black38,
                size: 16.0,
              ),
              label: new Text(
                "诺奖得主为上课推迟发布会",
                style: new TextStyle(color: Colors.black38)
              ),
            ),
          ),
          new Container(
            child: new FlatButton.icon(
              onPressed: (){
                Navigator.of(context).push(new MaterialPageRoute(builder: (context){
                  return new AskPage();
                }));
              },
              icon: new Icon(
                Icons.border_color,
                color: Colors.blue,
                size: 14.0
              ),
              label: new Text(
                '提问',
                style: new TextStyle(color: Colors.blue),
              ),
            ),
          )
        ],
      ),
    );
  }