美文网首页Flutter实战专题
Flutter基础篇之二-第一个程序

Flutter基础篇之二-第一个程序

作者: Michale_Zuo | 来源:发表于2020-09-17 09:07 被阅读0次

 打开android studio,Start a new Flutter project -> Flutter Application ->取项目名字,一直next直到finish

image.png image.png

在lib文件夹下的main.dart文件里,替换到以下代码

import 'dart:ui';

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: Scaffold(
        appBar: AppBar(

        ),
        body: Center(
          child: Text(
            'Welcome to Flutter , flutter is easy to learn',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
              color: Colors.deepOrange,
            ),
          ),
        ),
      ),
    );
  }
}

选择一个模拟器


image.png

Run第一个项目


image.png
image.png

初尝热重载(hot reload)

将'Welcome to Flutter , flutter is easy to learn',
文本替换为
'hot reload is very Convenience and fast, dont need recompile the whole project',
'hot reload is very Convenience and fast, dont need recompile the whole project',
image.png

选择⚡️小按钮(cmd+)可以看到实时更新


image.png

第一个程序尝试成功,体验到了Flutter的热重载便利的功能。

FAQ

用安卓模拟器run项目的时候,遇到报错 failed to find Build Tools revision 28.0.3(如果有,解决方案如下)
image.png

andriod-> app -> build.gradle 查看下buildToolsVersion,的确用的是28.0.3


image.png

那么应该是没有安装对应版本的buildToolsVersion


image.png
打开SDK Manager ->SDK Tools ->Show Package Details -> 安装28.0.3(对应版本的build tools)
image.png

相关文章

网友评论

    本文标题:Flutter基础篇之二-第一个程序

    本文链接:https://www.haomeiwen.com/subject/nnecyktx.html