从零开始学习Flutter【一】

[shuvigoss]

本节课目标，制作启屏页

[shuvigoss]

安装：https://flutterchina.club/get-started/install/ 这里就不具体介绍如何安装了 安装IDE：https://developer.android.com/studio 安装完成后，安装如下插件：

[shuvigoss]

创建Flutter项目

[shuvigoss]

完成后，打开项目：

修改代码为：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hello world'),
      ),
      body: Center(
        child: Text('hello world'),
      ),
    );
  }
}

[shuvigoss]

运行后结果为上图，表示你的hello world 已经成功了

[shuvigoss]

分析页面构成

Container:

Container({
  this.alignment,
  this.padding, //容器内补白，属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白，不属于decoration的装饰范围
  this.transform, //变换
  this.child,
})

Text:

const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
  })

[shuvigoss]

创建启动屏文件，叫welcome.dart

创建文件目录，具体文件可查看代码

在pubspec.yaml下增加如下配置 目的是为了告诉flutter静态文件的路径

通过布局编写代码：

import 'package:flutter/material.dart';

class WelcomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            child: Container(
              child: Column(
                children: <Widget>[Text('移动电子签名'), Text('随时 随地 随签')],
              ),
            ),
          ),
          Expanded(
            child: Image.asset(
              'images/welcome.png',
              fit: BoxFit.fill,
            ),
          )
        ],
      ),
    );
  }
}

运行代码可查看样式：

[shuvigoss]

我们发现一些问题：

• 背景颜色不对
• 2行字大小以及位置不对
• 图片位置不对

所以我们需要依次进行变更。 1、调整背景颜色：

2、修改字体大小以及样式