前语

关于flutter的学习始于2018年末，期间时断时续学了两次，但苦于没有实践项目运用，久而久之又忘得七七八八，所以这次将整个学习进程体系记录下来，以方便日后运用中能够及时查找到想要的知识点(即便现在chat-gpt能够很好查找到想要的，但也要知道提取关键词)。纵观如今移动端开发商场和flutter开发技术的老练，大前端的趋势不可逆，这次体系学习完flutter的基础知识后会做一个企业级的项目，到达印象深刻的意图。

Flutter项目架构

1、跨渠道模块

flutter是一种跨渠道技术，所以它自然是运用统一的事务代码要构建对应不同渠道的运用，其间不同渠道的构建需求依赖其原生开发所需的idea。下面通过Android Studio新建一个flutter项目，其默许新建了6个渠道的运用：android、ios、linux、macos、web及windows。

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

Flutter统一了在各渠道的事务逻辑交互，Dart则提供了事务操作。Flutter本质上能够看作是一个能够运转在其他渠道的类库，运用各渠道开发的IDE能够单独运转相关渠道项目。

2、lib文件夹

lib文件夹装载的都是dart文件，其便是flutter构建页面的代码，其间运用啦dart言语完成对页面逻辑的完成，项目默许的是main.dart.

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

3、pubspec.yaml文件

pubspec文件是用于项目装备的，如下：

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

uses-material-design: true便是运用谷歌的material-design风格，Android开发的同学对此应该非常了解了。

关于资源的引证： 在项目新建一个assets文件夹：

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

在pubspec文件中引证进来：

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

这样就能够在项目中运用该图片资源。如果需求设置字体，也是在assets文件下新建一个fonts文件夹，通过在pubspec文件中引进。

综上便是一个flutter项意图基本结构。

用Flutter输出一个Hello Word

新建一个flutter项目，翻开lib文件夹中的main.dart文件，咱们看到该文件中有很多代码，这个是项目默许生产的，咱们先把这些代码全部删除，从头开始做一个HelloWord的输出。

先导入material.dart

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

material是google推广的设计风格，flutter继承了material大部分风格。

添加运转的进口函数：main函数，并在其间触发runApp(Widget app)函数,咱们看到它的参数是Widget，Widget代表一个小部件，flutter中界面显现都是Widget来组成的，Widget中又会包括其他Widget，或是自界说Widget，能够了解为android中的View。咱们运用Center小部件完成居中显现Hello Word：

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

Text也是一个Widget，它是被Center包括的，所以需求运用child属性来标明它是一个子Widget，这儿运转的macOs，如下：

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

设置字体的款式

在Text部件中有style属性，能够设置字体大小、字体了解及颜色，如下：

child: Text(
  'Hello Word',
  textDirection: TextDirection.ltr, //表明从左向右显现
  style: TextStyle( //设置字体款式
    fontSize: 48.0, 
    fontWeight: FontWeight.bold, //粗体字
    color: Colors.yellow
  ),

自界说小部件

要完成需求继承StatelessWidget或StatefulWidget，并覆写它的build办法:

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

在输出Hello Word的末节中，runApp中传递的便是Widget，那咱们能够这样回来：

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

那runApp能够直接调用：

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

material风格组件和界面风格设置

flutter里边包括了大量的material风格的组件，咱们运用它来界说运用的主体风格，代码如下：

// meterialApp风格界说
class CusMaterialApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //Scaffold小部件包括常用的material常用的小部件，如titlebar
        appBar: AppBar(
          title: const Text("Title"),
          elevation: 0.0,  //标题栏阴影的大小
        ),
        body: CustomApp(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow // 设置主题色
      ),
    );
  }
}

也是自界说一个小部件，运用的MaterialApp，home代表的是设置主页，Scaffold小部件包括常用的material常用的小部件，如顶部和底部的工具栏。

Flutter列表数据展现

预备数据

数据一般来自后端服务接口回来或是本地数据库，这儿只是模拟一下数据的运用，在lib文件夹下新建一个model文件夹并新建一个data.dart文件：

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView
依据ItemData实体类模拟一个列表items。

列表填充数据并展现

这儿主要是修正MaterialApp中home的boby，所以自界说一个DataHome的Widget，在body中运用ListView小部件来展现数据：

body: ListView.builder(
  itemCount: items.length,
  itemBuilder: _itemBuilder,
),

_itemBuilder是处理列表每一项数据，了解安卓开发的话能够了解这个是Adapter中的convert办法处理，_itemBuilder处理如下：

Widget _itemBuilder(BuildContext context, int position){
  return Container( //相当于每个列表项的布局
    color: Colors.white,
    margin: const EdgeInsets.all(8.0), //设置整个Container的margin
    child: Column( //Container里边的笔直布局
      children: <Widget>[
        Image.network(items[position].imgUrl),
        const SizedBox(height: 16.0), //图片和文本的间隔空间
        Text(
          items[position].title,
          style: Theme.of(context).textTheme.titleLarge,
        ),
      ],
    ),
  );
}

运转作用如下：

Flutter之旅(一)-Flutter项目架构、HelloWord及ListView

结尾

最后，把文中的HelloWord和LisView展现的事例封装成自界说的Widget，代码存放处：lib/widget。