Flutter实战--美食App(一)

镇楼

一直想用Flutter撸个实战的教程，但苦于没有好的主题，偶然间发现某美食App上的内容还可以，随即决定仿个Flutter版的。本教程适合有编程基础人员阅读，开发环境为VSCode+Flutter+Dart（开发环境配置请自行百度解决。）
下面先来个效果图，由于视频录制转gif太大，下面GIF大概展示了下功能，后面会介绍每个具体的功能实现。

效果图

接下来我们将要实现home界面长啥样，主要由以下几个部分构成：

home界面

下面我们就一步步来实现这个界面。

在VSCode中新建一个Flutter工程，命名为iCooker，之后VSCode会自动生成一个项目目录并生成相关文件夹及文件。其中有个main.dart文件，打开该文件会发现最上面有句void main()=>runApp(MyApp())的语句，而void main()就是程序的入口函数。 在main.dart文件中我们可以设置App的主题色、字体样式等全局变量。
接下来我们要改造main.dart文件中的内容，让程序在进入home界面之前先进入一个SplashPage界面(下一节介绍)，先来看看改造的main.dart文件里都有些啥。

• main

/**
* main.dart
**/
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:icooker/pages/splash_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false, //关闭banner上的Debug标识
          theme:ThemeData(
              primarySwatch: Colors.blue,
          ),
          home:  SplashPage(),
    );
  }
}

main.dart里暂时我们就写这么多，后面我们会慢慢加入新的功能进去。其中MyApp 是一个StatefulWidget部件，这是一个有状态的widget意思是我们可以在这里进行某些状态值的刷新操作，只要调用setState(() {})方法中实现相关业务代码即可，debugShowCheckedModeBanner: false这句是关闭debug模式下模拟器或真机右上角debug标识的。
好，下节我们将要正式开始相关界面的业务实现了。

☞完整Demo请移步 iCooker 喜欢的请给个Star ☆！！