Flutter的开发环境搭建-图解

这篇具有很好参考价值的文章主要介绍了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,所以你无需单独安装。

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

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

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

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

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

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

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

3. 配置编辑器:

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

添加工具

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

4.新建flutter项目

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

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

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

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

4. 配置模拟器或真机:

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

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

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

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

6.编译apk

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

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

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

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

Flutter的开发环境搭建-图解,Android,入门,应用,flutter,android,ios,android studio

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文章来源地址https://www.toymoban.com/news/detail-608148.html

到了这里,关于Flutter的开发环境搭建-图解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter开发②环境搭建及入口

    目录 Window Android环境搭建 安装配置 安装配置JDK 下载安装Android Studio 下载配置Flutter SDK  电脑上配置Flutter国内镜像 ​编辑 运行flutter doctor命令检测环境是否配置成功 Android Studio安装Flullter插件 找不到运行的设备  Flutter Android真机调试及VScode开发flutter应用 Flutter虚拟机模拟器

    2024年03月28日
    浏览(93)
  • iOS开发 超详细Flutter开发环境搭建

    此文章针对针对移动开发者,关于Flutter环境搭建,仅供参考,也可参考官网https://flutter.dve/ 进入Flutter官网https://flutter.dve/  此网站为中国网站,无需翻墙即可进入 进入后,此处便为Flutter SDK下载地址了,根据自己的操作系统选择(本人为MacOS系统,下面以本人电脑为例操作)

    2023年04月17日
    浏览(45)
  • Mac电脑 Vscode : Flutter 开发环境搭建(最细节教程)

    参考链接: Mac+VSCode安装flutter环境_mac vscode配置flutter_GalenWu的博客-CSDN博客 mac搭建Flutter环境以及初始化项目 - 简书 注意: *下载xcode 就包含git了, *苹果芯片和intel 芯片需要的环境不同,苹果芯片需要安装: Important:  If you’re installing on an Apple Silicon Mac, you must have the Rosetta t

    2024年02月05日
    浏览(53)
  • Flutter Windows开发环境搭建教程与学习资料推荐

      Windows应用软件开发有很多框架可以选择,例如比较流行的Electron、Qt、CEF、WPF、WinForm、MFC、DuiLib、SOUI等等。Flutter是近几年流行的全平台应用开发框架,可以进行Android、IOS、Web、MacOS、Windows、Linux等平台的应用软件开发。   Flutter是谷歌推出的一种移动应用开发框架,使

    2024年02月05日
    浏览(71)
  • 搭建Flutter开发环境、从零基础到精通(文末送书【北大出版社】)

    目录 搭建开发环境 1. 下载Flutter SDK 2. 设置镜像地址及环境变量 3. 安装与设置Android Studio 4. 安装Visual Studio Code与Flutter开发插件 5. IDE的使用和配置 6. 安装Xcode 7. 检查Flutter开发环境 好书推荐 内容简介 作者简介 Flutter可以跨平台运行在Windows、macOS、Linux等系统上。接下来介绍如

    2024年02月08日
    浏览(70)
  • Flutter与Android开发:构建跨平台移动应用的新选择

    本文内容提纲如下: 介绍Flutter技术:Flutter是一种由Google推出的开源UI工具包,用于构建高性能、跨平台的移动应用。文章将介绍Flutter的基本概念、特点和优势,包括其快速的开发速度、一致的用户界面和丰富的UI组件库等。 Flutter与Android开发的对比:文章将对比Flutter与传统

    2023年04月21日
    浏览(186)
  • Android应用开发-Flutter的LongPressDraggable控件回调函数onDraggableCanceled使用

    以下是如何使用 onDraggableCanceled 的示例: velocity 参数表示拖动被取消时的速度信息。 offset 参数表示拖动被取消时的偏移量信息。 这个回调通常用于在拖动被取消时执行一些清理工作或展示一些反馈。例如,你可能想要将拖动对象返回到原始位置,或者显示一个提示,告诉用

    2024年03月08日
    浏览(42)
  • Android:手把手带你入门跨平台UI开发框架Flutter

    定义:一款Google出品开源的移动客户端UI开发框架(SDK) 作用:用一套代码同时在Android、iOS上快速构建高质量、高性能的原生用户界面 开发语言:Dart语言(高开发效率、高性能等) 2. 特点 Flutter的主要特点包括:使用自身的高性能渲染引擎进行渲染 Dart编程语言语言 具体介

    2024年04月13日
    浏览(68)
  • Mac电脑Android Studio和VS Code配置Flutter开发环境(图文超详细)

    官网地址: https://developer.android.google.cn/ 历史版本下载地址: https://developer.android.com/studio/archive?hl=zh-cn 到App Store下载安装最新版本,如果MacOS更新不到13.0以上就无法安装最新的Xcode,只能去下载以前版本的Xcode。 历史版本下载地址: https://developer.apple.com/download/all/?q=Xcode VS C

    2024年02月03日
    浏览(57)
  • Android:手把手带你入门跨平台UI开发框架Flutter,渣本Android开发小伙如何一步步成为架构师

    3.1 框架结构 Flutter框架主要分为两层:FrameWork层、Engine层,如下图所示: 说明:开发时,主要基于Framework层;运行时,则是运行在 Engine上。每层的具体介绍如下: 3.2 原理概述 开发时,主要基于Framework层;运行时,则是运行在 Engine上 Engine是Flutter的独立虚拟机,由它适配 提

    2024年04月16日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包