Android Studio中配置Flutter插件,创建小项目“hello world”

文章目录

  • 一、下载Flutter SDK
  • 二、Android studio中安装Flutter插件
  • 三、创建Flutter小项目

一、下载Flutter SDK

打开官网https://flutter.io/setup-windows/下载Flutter sdk并解压到一目录
Android Studio中配置Flutter插件,创建小项目“hello world”_第1张图片
Android Studio中配置Flutter插件,创建小项目“hello world”_第2张图片
Android Studio中配置Flutter插件,创建小项目“hello world”_第3张图片

二、Android studio中安装Flutter插件

Android studio中安装Flutter插件,File - Settins - Plugins -查找到Flutter - install,在安装Flutter插件时会自动提示下载Dart插件,只要同意即可,重启as后再次查看会显示如图所示效果:
Android Studio中配置Flutter插件,创建小项目“hello world”_第4张图片
Android Studio中配置Flutter插件,创建小项目“hello world”_第5张图片

图中标红代表Dart插件安装完成
Android Studio中配置Flutter插件,创建小项目“hello world”_第6张图片
Android Studio中配置Flutter插件,创建小项目“hello world”_第7张图片

配置FlutterDart路径
Android Studio中打开设置,在Languages & Frameworks中可以看到多了FlutterDart两个选项,按照下图配置自己的 FlutterDart路径即可:

三、创建Flutter小项目

Android Studio中配置Flutter插件,创建小项目“hello world”_第8张图片
Android Studio中配置Flutter插件,创建小项目“hello world”_第9张图片
Android Studio中配置Flutter插件,创建小项目“hello world”_第10张图片

Android Studio中配置Flutter插件,创建小项目“hello world”_第11张图片

Android Studio中配置Flutter插件,创建小项目“hello world”_第12张图片
Android Studio中配置Flutter插件,创建小项目“hello world”_第13张图片
提供简化的代码:

import 'package:flutter/material.dart';

void main() {
  return runApp(const Root());
}

class Root extends StatelessWidget {
  const Root({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "daylight",
      home: Scaffold(
        appBar: AppBar(title: const Text("daylight")),
        body: const Center(
          child: Text("hello world"),
        ),
      ),
    );
  }
}

运行程序效果,如下图:

Android Studio中配置Flutter插件,创建小项目“hello world”_第14张图片

你可能感兴趣的:(Flutter,android,studio,flutter,配置,hello,world)