How to run a project in Flutter

I still remember that when I first started learning flutter, after creating the project, I didn't know how to run the effect. I believe that many people were confused at the beginning.

After flutter creates the project, there is an automatically generated main.dart file, this is the main file at runtime, which contains the entry function for running. For beginners, just write a few demos, there is no need to choose this way. Please refer to the following process to modify:

(1) Find the file main.dart, delete all the contents inside, and put in the following code. This code is the basic architecture of operation. In the future, all the codes we write can be written directly in this file.
Template 1 (stateless)

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
  }
}

Template 2 (stateful)

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( 
    );
  }
}

Sometimes the function we call can be written in the home location

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()
        );
  }
}

Ask me if you have any questions

(2) We can directly change the part of the code that can be modified in whatever style we want to write.

This template code has a quick write, that is, write stl in the editor, and a prompt flutter stateless widget will pop up next to it. Press enter to get the basic code of this structure, and then write the created class name. If you are not prompted, then download the plug-in.

Later blogs will use this template to write some code. You can copy my code directly into the editor and run it directly.

Some people may not know how to run it. Taking vscode as an example, I will show the running process with a few pictures.

The first step: call the running device
Shortcut key ctrl+shift+p

input command: launch emulator

Select the device, for example, my device is the

second step: Run

prompt:
If the code of the run file appears red, it may be that your software is not configured properly, and it may be that the run file is not configured.

Shortcut key ctrl+p, search file, launch.json

Modify two parameters

name is the name of your project.
program is the running file, pay attention to the path