Flutter与Dart学习之路之vscode建一个flutter的简单demo

Flutter与Dart学习之路之vscode建一个flutter的简单demo

效果展示

  • 截图

Flutter与Dart学习之路之vscode建一个flutter的简单demo

项目实现流程

打开虚拟机

  • 点击 no device
    Flutter与Dart学习之路之vscode建一个flutter的简单demo
  • 选择虚拟机(如果没有的需要去下载先,不过在安装flutter环境的时候大家应该都有下载好了,用flutter doctor查看一下)
    Flutter与Dart学习之路之vscode建一个flutter的简单demo

创建项目

  • 在命令行下,到达自己选择的工作空间输入以下指令(第一次可能有点久)
    • flutter create demo 
      
  • 完成后显示如下

Flutter与Dart学习之路之vscode建一个flutter的简单demo

  • 打开main.dart 一开始也是可以运行的,是一个官方提供的计数器,我们全部删除,改为如下,方便理解
    main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override

  Widget build(BuildContext context){
    return MaterialApp(
     
      title:'电影海报示例',
      home:Scaffold(
         appBar: new AppBar(
        title:Text('电影海报实例 appBar')
      ),
        body: Text(
           '电影海报'
        ),
      )
    );

  }


}


  • 命令行运行 flutter run (记得先打开虚拟机,不然会报错)
    效果图
    Flutter与Dart学习之路之vscode建一个flutter的简单demo