第二章：Hello,Flutter（二）

Flutter-从入门到放弃(目录,持续更新中)

清理模板APP

我们已经在前面设置了APP的样，下面我们尝试来修改一下模板的UI。
从之前的代码可以看到，入口依次是main()->RecipeApp.build()，我们在RecipeApp里面返回了一个MaterialApp，在MaterialApp中通过修改theme来完成了自定义的样式，而其中的home就是具体的UI实现。home返回的是一个MyHomePage对象，我们传入了一个title属性，显示在APP的标题栏上。MyHomePage->createState()是入口方法，具体的实现是在返回的_MyHomePageState中，我们修改_MyHomePageState来实现UI修改。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    //1.Scaffold是UI的顶层结构
    return Scaffold(
      //2.APPBar展示了在MyHomePage(title: 'Recipe Calculator')传入的标题
      appBar: AppBar(
        title: Text(widget.title),
      ),
      //3.SafeArea防止应用程序太接近操作系统界面
      body: SafeArea(
        // TODO: Replace child: Container()
        //4.空的UI，后面将会逐步完善
        child: Container(),
      ),
    );
  }
}

修改后的效果如下：

创建食谱数据

我们准备创建一个食谱列表，在此之前，需要先创建食谱的实体类。
在lib文件夹里创建一个recipe.dart文件，如下：

class Recipe {
  String label;
  String imageUrl;

  Recipe(this.label, this.imageUrl);

  //测试用数据
  static List<Recipe> samples = [
    Recipe(
      'Spaghetti and Meatballs',
      'assets/2126711929_ef763de2b3_w.jpg',
    ),
    Recipe(
      'Tomato Soup',
      'assets/27729023535_a57606c1be.jpg',
    ),
    Recipe(
      'Grilled Cheese',
      'assets/3187380632_5056654a19_b.jpg',
    ),
    Recipe(
      'Chocolate Chip Cookies',
      'assets/15992102771_b92f4cc00a_b.jpg',
    ),
    Recipe(
      'Taco Salad',
      'assets/8533381643_a31a99e8a6_c.jpg',
    ),
    Recipe(
      'Hawaiian Pizza',
      'assets/15452035777_294cefced5_c.jpg',
    ),
  ];
}

很简单，只有一个标签和图片链接以及测试用的一个数据集合，我们后面会逐步完善。
我们造的一些测试数据中包含了图片资源的链接，所以需要添加一些图片资源到项目中。
在项目根目录下创建一个assets文件夹，然后找一些图片资源放到该目录下，同时，打开项目下的 pubspec.yaml文件，添加以下内容：

assets:
 - assets/

这一行声明了assets文件夹来作为app的资源文件夹，注意添加的这一行与原有的

uses-material-design: true

这一行对齐。