Flutter怎么运行一个项目

还记的我最开始学习flutter的时候，创建完工程以后，不知道怎么去运行出效果。我相信很多人最开始的时候也是一脸懵。

flutter创建好工程以后，有一个自动生成的main.dart文件，这个就是运行时的主文件，里面有运行的入口函数。对于初学者只是简单写几个demo，没必要选择这种方式。请参考以下过程修改：

（1）找到main.dart这个文件，把里面的内容全部删掉，放入以下代码，这个代码是运行的基本架构，以后我们写所有的代码都可以直接在这个文件里面写。
模板1（无状态）

import 'package:flutter/material.dart';

void main() => runApp(MyApp());//入口函数，MyApp()在runApp里面运行
//这部分代码基本是不变的
class MyApp extends StatelessWidget {//MyApp就是上面入口函数运行所要创建的类
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('flutter demo'),
      ),
      body: Carddemo(),
    ));
  }
}
//修改样式等，就从这里修改
class Carddemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return null();//这里的null可以随着你的代码修改，比如可以是Container
  }
}

模板2（有状态）

import 'package:flutter/material.dart';

void main() => runApp(MyApp());//入口函数，MyApp()在runApp里面运行
//这部分代码基本是不变的
class MyApp extends StatelessWidget {//MyApp就是上面入口函数运行所要创建的类
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('flutter demo'),
      ),
      body: CardPage (),
    ));
  }
}

class CardPage extends StatefulWidget {
  @override
  _CardPageState createState() => _CardPageState();
}

class _CardPageState extends State<CardPage>{
  @override
  Widget build(BuildContext context) {
    return null( 
    );
  }
}

有时候我们调用的函数可以写在home的位置

import 'package:flutter/material.dart';

void main() => runApp(MyApp());//入口函数，MyApp()在runApp里面运行
//这部分代码基本是不变的
class MyApp extends StatelessWidget {//MyApp就是上面入口函数运行所要创建的类
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Carddemo()
        );
  }
}

有什么疑问可以来问我哦

(2)以后我们要写什么样式就可以直接更改可以修改的那部分的代码。

这个模板代码有一个快写，就是在编辑器里写入stl，旁边会弹出一个提示 flutter stateless widget，按下enter键，可以得到这个结构基本代码，然后再写入创建的类名等。如果说你没有出现提示，那就去下载插件。

后面的博客就会用到这个模板来写一些代码，你们可以直接复制我的代码到编辑器里，直接运行。

可能有人不知道怎么去运行，以vscode为例，我用几张图展示一下运行过程。

第一步：调用运行设备
快捷键 ctrl+shift+p
在这里插入图片描述
输入指令：launch emulator

选择设备，比如我的设备是
在这里插入图片描述
第二步：运行

提示：
如果出现运行文件代码报红，有可能是你的软件没有配置好，另外还有可能就是没有配置运行文件

快捷键ctrl+p，搜索文件，launch.json

在这里插入图片描述
修改两个参数

name 是你的项目名称
program 是运行的文件，注意路径

Flutter怎么运行一个项目

猜你喜欢