Flutter的开发环境搭建-图解

前言:Flutter作为一个移动应用开发框架,具有许多优点和一些局限性。最大的优点就是-跨平台开发:Flutter可以在iOS和Android等多个平台上进行跨平台开发,使用一套代码编写应用程序,节省开发时间和成本。

Flutter可以编译出以下平台的程序:

1. Android:Flutter可以生成Android应用程序的APK文件,并在Android设备上运行。

2. iOS:Flutter可以生成iOS应用程序的IPA文件,并在iOS设备上运行。

3. Web:Flutter可以通过编译为JavaScript,生成可以在Web浏览器中运行的应用程序。

4.Windows:Flutter可以生成Windows操作系统上的桌面应用程序。

5. macOS:Flutter可以生成macOS操作系统上的桌面应用程序。

6. Linux:Flutter可以生成Linux操作系统上的桌面应用程序。

值得注意的是,虽然Flutter可以编译为不同平台的应用程序,但在每个平台上的体验可能会有所不同,并且可能需要进行一些平台相关的调整和优化。

下面以Android开发为例,

搭建Flutter的开发环境,请遵循以下步骤:

1. 安装Flutter SDK:

首先,你需要下载和安装Flutter SDK。在Flutter官方网站(https://flutter.dev)上,选择与你的操作系统相对应的安装包进行下载。解压下载的文件,并将flutter的bin目录添加到系统的PATH环境变量中,这样在命令行中就可以直接使用flutter命令了。

安装Dart SDK:Flutter使用Dart语言进行开发,因此还需要安装Dart SDK。在Flutter SDK中已经包含了Dart SDK,所以你无需单独安装。

2.命令行中运行    flutter doctor,检查Flutter SDK的安装、配置环境以及依赖项等,并给出相应的建议和提示。

  • [×]表示还不能正常运行

  • [!]表示还存在一些问题

  • 只有全部为[√],系统环境才是完全安装好,你的检查报告才是没毛病的

看看缺少什么配置,需要用什么,就搜索补充什么配置

3. 配置编辑器:

选择一款适合你的编辑器来进行Flutter开发,常用的编辑器有Android Studio、Visual Studio Code(VS Code)和IntelliJ IDEA。安装你选择的编辑器,我选择的是Android Stuido,File>Setting>Plugins中搜索Dart和flutter插件,并安装,这两个插件可以提供代码补全、调试等特性来提升开发效率。

添加工具

4.新建flutter项目

下一步下一步就行,点击运行

在项目目录中,您应用程序的UI代码位于 lib/main.dart。

4. 配置模拟器或真机:

为了在模拟器或真机上运行和调试Flutter应用程序,你需要配置相应的设备。对于Android开发,可以使用Android模拟器或者通过USB连接真机。对于iOS开发,需要使用Xcode来模拟器或连接真机。

编译过程中,有些文件下载不成功,再次点击run,我这边就可以直接运行显示了

6.编译apk

或者命令行,对应目录下输入flutter build apk 编译apk

7.主内容文件lib/main.dart

内容修改保存后,视图即可更新,即快速调试的能力,单凭这点就让我对flutter有很大好感

import 'package:flutter/material.dart';


void main() {
  runApp(const MyApp());
}

/// 这里我们的MyApp是一个类,继承了StatelessWidget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  /// 这个组件是这个app的根 这是一个无状态部件,然后实现构造方法,
  @override
  Widget build(BuildContext context) {
    ///构造方法里面通过MaterialApp()函数定义风格,然后是标题、主题和主页面信息,
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        ///这里有一个Colors.blue,你试一下改成red,或者green。
        ///如果你这时候项目是运行在模拟器 或者真机上的话,你可以修改后Ctrl + S 进行保存。就能同步展示
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
        useMaterial3: true,
      ),

      ///  这里主页面home中调用MyHomePage()函数,也就是我们当前页面所显示的内容。
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );

    // return MaterialApp(
    //   title: '天气预报小程序',
    //   theme: ThemeData(
    //     primarySwatch: Colors.blue,
    //   ),
    //   home: WeatherPage(),
    // );
  }
}

/// 这里MyHomePage继承StatefulWidget,
/// 这是一个有状态的部件,这里就需要一个状态了,
/// 通过createState()得到一个_MyHomePageState,
/// 这个_MyHomePageState()就是这个页面的主要内容了,它里面是
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  /// 在 build 方法中,我们通常通过对基础 Widget 进行相应的 UI 配置,或是组合各类基础 Widget 的方式进行 UI 的定制化。
  @override
  Widget build(BuildContext context) {

    ///这里返回一个Scaffold,这是一个脚手架,用来构建页面
    return Scaffold(
      ///然后我们看Scaffold中的内容,AppBar 是页面的导航栏,我们直接将 MyHomePage 中的 title 属性作为标题使用。
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        ///这里我们从App.build方法创建的MyHomePage对象中获取值,并使用它来设置appbar的标题。
        title: Text(widget.title),
      ),
      ///body 则是一个 Text 组件,显示了一个根据 _counter 属性可变的文本:‘You have pushed the button this many times:$_counter’。
      body: Center(

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      ///floatingActionButton,则是页面右下角的带“+”的悬浮按钮。我们将 _incrementCounter 作为其点击处理函数。
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

https://blog.csdn.net/ly_xiamu/article/details/131931803

参考:

https://www.cnblogs.com/libo-web/p/16060590.html

Android Flutter开发环境搭建_大耳猫的博客-CSDN博客

创造价值,乐哉分享!776147358

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/49278.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

了解Unity编辑器之组件篇Mesh(三)

Mesh&#xff1a;是一种三维模型的表示形式&#xff0c;它由一系列顶点、三角形&#xff08;或其他多边形&#xff09;和相关属性组成。Mesh用于表示物体的外观和形状&#xff0c;它是可见物体的基本组成部分。通过操作Mesh&#xff0c;开发者可以实现各种视觉效果、物理模拟和…

基于PCA和小波算法联合实现红外与可见光图像融合的Matlab仿真(完整源码+35组数据集)

以下是一个使用PCA和小波实现红外与可见光图像融合的Matlab仿真完整源码。源码中只需修改红外图像&#xff08;IR.bmp&#xff09;和可见光图像&#xff08;VI.bmp&#xff09;名字即可 文章目录 效果展示数据集展示步骤说明完整源码下载地址 效果展示 最终融合效果展示&#x…

java执行ffmpeg命名的Docker镜像制作

今天来记录一下通过Dockerfile制作docker镜像的过程 背景 我需要通过java服务调用ffmpeg去执行视频合并的功能&#xff0c;想把这个环境封装到docker镜像当中&#xff0c;方便以后迁移部署。 实现方法 随便找一个路径创建一个Dockerfile文件 touch Dockerfilevim Dockerfi…

如何使用vscode连接远程服务器

1、安装remote-ssh 在应用商店搜索remote-ssh&#xff0c;安装remote-ssh 2、安装完成后会出现远程资源管理器 3、点击远程资源管理器 --ssh的➕号&#xff0c;在输出框内输入要连接的服务器ip及账户名 如&#xff1a;ssh 账户名ip地址 4、输入后回车保存 5、保存后刷新一下 6…

Redis学习路线(1)—— Redis的安装

一、NoSQL SQL VS NoSQL 1、名称 SQL 主要是指关系数据库。NoSQL 主要是指非关系数据库。 2、存储结构 SQL 是结构化的数据库&#xff0c;以表格的形式存储数据。NoSQL 是非结构化的数据库&#xff0c;以Key-Value&#xff08;Redis&#xff09;&#xff0c;JSON格式文档&…

【React】版本正确安装echarts-liquidfill(水球图表)包引入不成功问题

目标效果图&#xff1a; 安装&#xff1a; npm install echarts npm install echarts-liquidfill 引入&#xff1a; Import:import * as echarts from echarts; import echarts-liquidfill 或 import echarts-liquidfill/src/liquidFill.jsOr:import * as echarts from…

TreeMap的底层实现

0. 你需要知道的TreeMap的内置属性 0.1 节点属性 K key; // 键 V value; // 值 Entry<K,V> left; // 左子节点 Entry<K,V> right; // 右子节点 Entry<K,V> parent; // 父节点 boolean color; // 节点的颜色0.2 成员变量 //比较器对象private f…

Android性能优化之游戏引擎初始化ANR

近期&#xff0c;着手对bugly上的anr 处理&#xff0c;记录下优化的方向。 借用网上的一张图&#xff1a; 这里的anr 问题是属于主线程的call 耗时操作。需要使用trace 来获取发生anr前一些列的耗时方法调用时间&#xff0c;再次梳理业务&#xff0c;才可能解决。 问题1 ja…

14 Linux实操篇-进程管理(重点)

14 Linux实操篇-进程管理&#xff08;重点&#xff09; 文章目录 14 Linux实操篇-进程管理&#xff08;重点&#xff09;14.1 进程的基本操作14.1.1 进程和程序14.1.2 父进程和子进程14.1.3 常见的Linux进程14.1.4 显示系统执行的进程-ps14.1.5 终止进程-kill/killall14.1.6 查…

LeetCode 75 第十二题(11)盛最多水的容器

目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 配合着示例给出的图片我们可以得知找出盛水最多的容器是什么意思,给一个数组,找出数组中两个元素能围成的最大的矩阵面积是多少. 比较直观的想法是套两层for循环暴力解出来,但是这题是中等难度题,一般中等题是没法用暴力得…

【动态规划刷题 2】使⽤最⼩花费爬楼梯 解码⽅法

使⽤最⼩花费爬楼梯 746 . 使用最小花费爬楼梯 链接: 746 . 使用最小花费爬楼梯 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 …

【JAVA】 String 类简述笔记

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言String类创建一个String类 常用方法字符串长度 length() 方法连接字符串 concat() 方法创建格式化字符串 format()功能 前言 string是C、java、VB等编程语言中的字符串&…

安卓:百度地图开发(超详细)

一、百度地图介绍 百度地图SDK是一套供开发者使用的软件开发工具包&#xff08;SDK&#xff09;&#xff0c;用于在Android应用程序中集成和使用百度地图功能。通过使用百度地图SDK&#xff0c;开发者可以实现在自己的应用中显示地图、获取定位信息、进行搜索、导航等功能。 百…

办公软件巨头CCED、WPS迎来新挑战,新款办公软件已形成普及之势

办公软件巨头CCED、WPS的成长经历 众所周知&#xff0c;CCED和WPS是中国办公软件行业的两大知名品牌。 但它们的成长经历不是一蹴而就的&#xff0c;都是经历了漫长的发展过程的。 CCED是中国大陆早期的一款文本编辑器&#xff0c;它在上个世纪80年代末和90年代初非常流行。 …

数学建模-MATLAB三维作图

导出图片用无压缩tif会更清晰 帮助文档&#xff1a;doc 函数名 matlab代码导出为PDF 新建实时脚本或右键文件转换为实时脚本实时编辑器-全部运行-内嵌显示保存为PDF

githack的安装步骤+一次错误体验

一.githack的安装步骤 1.要在Kali Linux上安装GitHack工具&#xff0c;您可以按照以下步骤操作&#xff1a; 打开终端并使用以下命令克隆GitHack存储库&#xff1a; git clone https://github.com/lijiejie/GitHack.git2.进入GitHack目录&#xff1a; cd GitHack3.安装依赖项…

Linux下安装RabbitMQ教程

官方安装指南&#xff1a;https://www.rabbitmq.com/install-rpm.html 我们将要安装的RabbitMQ的版本是3.8.2 el/7/rabbitmq-server-3.8.2-1.el7.noarch.rpm - rabbitmq/rabbitmq-server packagecloud 不需要单独安装Erlang环境。 2. 环境配置&#xff1a; 前提&#xff…

RabbitMQ 教程 | RabbitMQ 入门

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…

自动驾驶之轨迹规划8——Apollo参考线和轨迹

1. abstract 本文主要讲解routing和planning模块中的reference line&#xff0c;我之前一直搞不明白这个reference line是如何生成的&#xff0c;有什么作用&#xff0c;和routing以及planning的关系。现在有了一些心得打算梳理一下&#xff1a; 决策规划模块负责生成车辆的行…

6、Kubernetes核心技术 - Pod

目录 一、概述 二、Pod机制 2.1、共享网络 2.2、共享存储 三、Pod资源清单 四、 Pod 的分类 五、Pod阶段 六、Pod 镜像拉取策略 ImagePullBackOff 七、Pod 资源限制 八、容器重启策略 一、概述 Pod 是可以在 Kubernetes 中创建和管理的、最小的可部署的计算单元。P…