美文网首页
Flutter基础篇2: Hello World

Flutter基础篇2: Hello World

作者: 铁头娃_e245 | 来源:发表于2020-09-16 01:37 被阅读0次

flutter开发环境搭建参考上一篇Flutter基础篇: Mac端搭建安装环境

使用VSCode写出第一行代码Hello World

打开IDE工具VSCode
进入到终端模式
选择文件路径后运行source ~/.bash_profile配置环境变量(每次都要运行一次)之后新建一个flutter项目flutter create demo001 demo001是指工程文件名。(可随意命名)

可以上拉底部的条能拉出来这个终端
运行完成后会显示
All done!
[✓] Flutter: is fully installed. (Channel stable, 1.20.3, on Mac OS X 10.15.4 19E266, locale
    zh-Hans-CN)
[✓] Android toolchain - develop for Android devices: is fully installed. (Android SDK version
    30.0.2)
[✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 11.6)
[✓] Android Studio: is fully installed. (version 4.0)
[✓] VS Code: is fully installed. (version 1.49.0)
[!] Connected device: is not available.

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd demo001
  $ flutter run

Your application code is in demo001/lib/main.dart.

有一个警告[!] Connected device: is not available.是没有挂载设备,打开已经创建的demo001的工程


点击右下角No Device按钮
弹出框里显示一个iOS的模拟器和一个上次创建的Nexus 5的安卓模拟器,这里选择了iOS Simulator设备
弹出框
之后运行source ~/.bash_profileflutter run,稍等一会,模拟器就运行起来这个demo001工程了
跑起来啦
这里flutter有几个配置功能键
Flutter run key commands.
r Hot reload. 🔥🔥🔥    (热加载,直接查看效果)
R Hot restart.  
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

常用快捷键如图



下面进入lib下的main文件下


main
可以把里面的代码全部删掉,输入如下代码(具体写法可以学习下Dart)
import 'package:flutter/material.dart';

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

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

写完后需要command+s保存


之后在终端输入r热启动
Hello World
大功告成,第一行代码set完成!

相关文章

  • Flutter基础篇2: Hello World

    flutter开发环境搭建参考上一篇Flutter基础篇: Mac端搭建安装环境[https://www.jian...

  • Flutter Hello World

    Flutter Hello World AndroidStudio Flutter Hello World 打开I...

  • flutter 笔记 Hello World

    flutter 笔记Hello World

  • Hello World

    Hello World 1 Hello World 2## Hello World 3 Hello World 4...

  • Flutter开发 -- [01 - Hello World]

    一. 第一个Flutter代码 1.1. Hello World 1.1.1. Hello World的需求 做任...

  • swift笔记1

    初见swift 打印‘hello world' print("hello world"); 教程 类型 基础类型:...

  • flutter hello world

    创建第一个项目。由于我使用的vscode 点击debug 然后点击stardebuging。我是mac 于是选择 ...

  • flutter hello world

    在surface pro4上不知道怎么弄好了Flutter了,运行成功在redmi k30 pro手机上了,结果跑...

  • Flutter - Hello World

    对于新学一门语言来说,第一个当然就是“Hello World”了,废话不多说,直接上代码: 下来我们解释下上面的代...

  • Hello, World!

    标题H1: #Hello, world! Hello, world! H2: ##Hello, world! He...

网友评论

      本文标题:Flutter基础篇2: Hello World

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