Flutter-创建第一个Flutter应用和热加载

 

创建第一个Flutter应用

没有配置好Flutter运行环境的请参考阅读 《Flutter-开发环境与入门》

打开Android Studio

  1. 选择 File>New Flutter Project
  2. 选择 Flutter application 作为 project 类型, 然后点击 Next
  3. 输入项目名称 (如 demo), 然后点击 Next
  4. 点击 Finish

Flutter-创建第一个Flutter应用和热加载_第1张图片

Flutter-创建第一个Flutter应用和热加载_第2张图片

Flutter-创建第一个Flutter应用和热加载_第3张图片

Flutter-创建第一个Flutter应用和热加载_第4张图片

替换 lib/main.dart.
删除lib / main.dart中的所有代码,然后替换为下面的代码.

​
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

​

点击如下按钮

运行项目,它将在屏幕的中心显示“Hello World”.

Flutter-创建第一个Flutter应用和热加载_第5张图片

现在开始体验热重载

删除lib / main.dart中的所有代码,然后替换为下面的代码.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

加了代码

theme: new ThemeData(
  primaryColor: Colors.white,
),

请注意,整个背景将会变为白色,包括应用栏.

Flutter-创建第一个Flutter应用和热加载_第6张图片

热重载方法:

ctrl-s, 或点击 热重载按钮 (带有闪电⚡️图标的按钮).

 

 

 

 

你可能感兴趣的:(【Flutter】1.基础开发)