用Flutter改造ZS项目小记一:界面显示一张图片

创建flutter工程

此步骤直接在studio中new Flutter Project 然后下一步即可.

创建程序欢迎界面

创建欢迎界面并一张图片

如何显示这张图片

1. 工程总目录下创建->assets目录
2. assets目录下创建images目录
3. 把要显示图片(launch_bg.jpg)拷贝到images目录下
4. 在pubspec.yuml文件下声明这个图片资源,代码如下:

  assets:
  - assets/images/launch_bg.jpg
复制代码

5. 创建LaunchPage.dart文件

import 'package:flutter/material.dart';
class launchApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Image.asset("assets/images/launch_bg.jpg");
  }
}
复制代码

6. 把上面创建的widget放到主程序函数当中

void main() =>
  runApp(
    new launchApp(),
  );
复制代码

7. 运行项目,我们就可以看到界面中只有这个图片显示在首页.如图:

转载于:https://juejin.im/post/5b7e1c6af265da43223c2fca