Flutter的开发环境搭建-图解

news2025/1/9 22:57:41

前言: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://www.cnblogs.com/libo-web/p/16060590.html

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python将大文件拆分为多个小文件

如上图&#xff0c;目前采用单行不停写入的方式&#xff0c;这里是读了两次文件&#xff0c;第一次读取文件是为了获取总行数&#xff0c;第二次读取是取数据内容。 如果只读取一次文件&#xff0c;则会对内存有一定的要求&#xff0c;会需要在第一次读取数据的时候就将文件内…

ONNX Runtime 加速深度学习(C++ 、python)详细介绍

ONNX Runtime 加速深度学习(C 、python)详细介绍 本文在 https://blog.csdn.net/u013250861/article/details/127829944 基础上进行了更改&#xff0c;感谢原作&#xff01; ONNXRuntime(Open Neural Network Exchange)是微软推出的一款针对ONNX模型格式的推理框架&#xff0c…

Redis常用数据类型和使用场景

Redis目前支持5种数据类型&#xff0c;分别是&#xff1a; String&#xff08;字符串&#xff09; List&#xff08;列表&#xff09; Hash&#xff08;字典&#xff09; Set&#xff08;集合&#xff09; Sorted Set&#xff08;有序集合&#xff09; 下面就分别介绍这五…

Qt Core学习日记——第六天QMetaMethod

Qt子类会将每一个函数封装成QMetaMethod存储在对应的QMetaObject中&#xff0c;包括信号、槽函数、普通函数、构造函数、析构函数 函数解析 QMetaMethod::methodSignature 获取方法的签名 比如函数slot2&#xff0c;对应签名是“slot2(int*)” QMetaMethod::name 方法名称。…

13.2.3 【Linux】新增与移除群组

基本上&#xff0c;群组的内容都与这两个文件有关&#xff1a;/etc/group, /etc/gshadow。 群组的内容其实很简单&#xff0c;都是上面两个文件的新增、修改与移除而已。 groupadd 为了让使用者的 UID/GID 成对&#xff0c;建议新建的与使用者私有群组无关的其他群组时&#x…

RabbitMQ入门,springboot整合RabbitMQ

周末的两天没有写文章&#xff0c;因为项目分离出来了一个权限管理平台&#xff0c;花了一点时间整理项目&#xff0c;同时完成了一些功能的开发。 今天这篇文章介绍一下RabbitMQ这个消息中间件&#xff0c;以及通过springboot整合RabbitMQ。 目录 一、初步了解RabbitMQ 二、…

学Java有哪些就业方向?

俗话说&#xff1a;男怕入错行&#xff0c;女怕嫁错郎。众所周知&#xff0c;选工作就是选行业&#xff0c;行业和方向选对了&#xff0c;个人的发展就会随着行业风向青云直上&#xff0c;比同龄人更快的积累到财富。那究竟未来什么会是热门行业呢?这个真的很难预测&#xff0…

【1++的C++初阶】之模板(二)

&#x1f44d;作者主页&#xff1a;进击的1 &#x1f929; 专栏链接&#xff1a;【1的C初阶】 文章目录 一&#xff0c;非类型模板参数二&#xff0c;模板特化三&#xff0c;模板分离编译 一&#xff0c;非类型模板参数 模板参数分为类类型模板参数与非类型模板参数。 类类型形…

【雕爷学编程】Arduino动手做(167)---MG996R金属齿轮舵机2

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…

苹果“空间音频导航”专利曝光,提供导航指引,跟声音走就对啦?

近日&#xff0c;苹果公司成功申请一项专利&#xff0c;该专利名为“空间音频导航”&#xff0c;该专利详细说明了如何利用双耳音频设备&#xff08;AirPods或Apple Vision Pro&#xff09;为用户提供导航指引。 “空间音频导航”是一种模拟声音来源方向和距离的技术&#xff0…

STM32MP157驱动开发——按键驱动(POLL 机制)

文章目录 “POLL ”机制&#xff1a;APP执行过程驱动使用的函数应用使用的函数pollfd结构体poll函数事件类型实现原理 poll方式的按键驱动程序(stm32mp157)gpio_key_drv.cbutton_test.cMakefile修改设备树文件编译测试 “POLL ”机制&#xff1a; 使用休眠-唤醒的方式等待某个…

c# Outlook检索设定问题

基于c# 设定outlook约会予定&#xff0c;时间格式是YYYY-MM-DD HH:mm 的情报。 问题发生&#xff1a; 根据开始时间&#xff08;2023/01/01 7:00&#xff09;条件查询该时间是否存在outlook信息时&#xff0c;明明存在一条数据&#xff0c;就是查询不出来数据 c#代码 Strin…

单源最短路的扩展应用

AcWing 1137. 选择最佳线路 有一天&#xff0c;琪琪想乘坐公交车去拜访她的一位朋友。 由于琪琪非常容易晕车&#xff0c;所以她想尽快到达朋友家。 现在给定你一张城市交通路线图&#xff0c;上面包含城市的公交站台以及公交线路的具体分布。 已知城市中共包含 n 个车站…

解决 Visual Studio Code 编译器代码自动格式化

首先找到.vscode下的settings.json配置文件 将vue3snippets.enable-compile-vue-file-on-did-save-code更改为false

多个HttpSecurity配置(局部AuthenticationManager)

前言 项目用的ruoyi的扩展版本(ts版本)&#xff0c;如果有缺失类&#xff0c;可以自行下载或补充------》个人理解 实现多端token&#xff0c;多端httpSecurity&#xff0c;并且相互隔离&#xff08;局部AuthenticationManager管理认证及授权&#xff09; 在最近的项目中遇到一…

[元带你学: eMMC协议 28] eMMC 上电时序 | eMMC 上电指南

依JEDEC eMMC及经验辛苦整理,原创保护,禁止转载。 专栏 《元带你学:eMMC协议》 内容摘要 全文 1500 字, 主要内容 eMMC 上电规范 和 eMMC 上电指南, 这部分内容偏向电气特性,如果不是硬件的同学只要特别浅的了解, 一带而过。 eMMC 上电规范 eMMC 电压 VCCQ指的是接口…

min_free_kbytes

转自&#xff1a;技术分享 | MemAvailable 是怎么计算的-腾讯云开发者社区-腾讯云 背景 前两天安装 OceanBase 时遇到一个小问题&#xff1a; 很明显&#xff0c;安装OB时要求服务器可用内存至少 8G&#xff0c;不达标就无法安装。为了凑这3台10G内存的服务器我已经费了不少劲…

springMVC快速入门

springMVC快速入门 简介 MVC是一种软件架构的思想&#xff0c;将软件按照模型、视图、控制器类划分。 M(model)&#xff1a;模型层&#xff0c;指工程中的javaBean,作用是处理数据 javaBean分为两类&#xff1a; 一类称为实体类Bean&#xff08;专门存储业务数据&#xff0c;如…

unity 控制text根据字数自动扩展大小,并扩展UI背景

需求&#xff1a;文字内容位置保持不变&#xff0c;向下增加&#xff0c;背景框随之同步扩展。 1.UGUI 九宫格 拉伸 对背景框图片资源处理&#xff0c;避免图片拉伸。 (10条消息) unity UGUI 九宫格 拉伸_unity九宫格拉伸_野区捕龙为宠的博客-CSDN博客 2.背景框添加组件 3.…

Linux 学习记录55(ARM篇)

Linux 学习记录55(ARM篇) 本文目录 Linux 学习记录55(ARM篇)一、使用C语言封装GPIO函数1. 封装GPIO组寄存器2. 封装GPIO模式以及相关配置3. 封装GPIO初始化结构体4. 使用自己的封装配置GPIO 一、使用C语言封装GPIO函数 1. 封装GPIO组寄存器 #define GPIOA ((GP…