Flutter学习1 - Android开发者快速上手

最新推荐文章于 2025-06-04 13:59:47 发布
最新推荐文章于 2025-06-04 13:59:47 发布
阅读量1.2k 收藏 14
点赞数 22
CC 4.0 BY-SA版权
分类专栏： Flutter Learning 文章标签： flutter 学习 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41733225/article/details/136157921
本文介绍了AndroidFlutter中的关键概念和常见用法，包括Activity和Fragment的对应关系，Widget的状态更新，布局的创建与动态调整，滚动列表的使用，以及基本的手势事件处理和进阶功能如异步UI、页面跳转、数据存储和网络请求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、对应关系

  • 概念对应关系
AndroidFlutter
页面Activity和FragmentWidget
视图ViewWidget
页面跳转IntentNavigater
网络库okHttphttp
数据存储SharedPreference和SQLiteshared_preferences和sqflite
  • 布局对应关系
AndroidFlutter
布局文件xmlWidget
线性布局LinearLayoutRow和Column widget
相对布局RelativeLayout组合使用Column、Row和Stack Widget
文本框TextViewtext
输入框EditTextTextField
  • 滚动列表对应关系
AndroidFlutter
布局文件xmlWidget
滚动视图ScrollViewListView
列表ListViewListView
列表RecyclerViewListView.builder

2、快速上手布局开发

（1）更新 Widget 状态

在这里插入图片描述

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String tips = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text(tips),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateTips,
        tooltip: 'Update',
        child: const Icon(Icons.add),
      ),
    );
  }

  //更新布局 widgets
  //类似android中 setText
  void _updateTips() {
    //我们无法改变widget，因为 Flutter 中 widget 是不可变的
    //但是可以通过 setState 改变 widget状态
    setState(() {
      tips = "快速上手 Flutter";
    });
  }
}
  • 在body中添加一个Text，其取值为 tips
  • 按钮的点击事件 _updateTips() 中，通过 setState() 改变 tips 的值，从而更新 widget 状态

该示例类似于 android 中的 textView.setText(tips)

（2）布局中添加/删除一个 Widget

在这里插入图片描述

在这里插入图片描述

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'muke flutter',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(title: 'muke learning'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  bool _toggle = true;

  get _dyWidget => _toggle ? const Text("Widget 1") : const Text("Widget 2");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _dyWidget,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateWidget,
        tooltip: 'Update',
        child: const Icon(Icons.add),
      ),
    );
  }

  //在布局中添加/删除一个 widget
  //类似安卓中 addView、removeView
  void _updateWidget() {
    setState(() {
      _toggle = !_toggle;
    });
  }
}
  • body中添加一个 Text，这个 Text 会根据 _toggle 的值变换，Text(“Widget 1”)或Text(“Widget 2”)
  • 按钮点击事件 _updateWidget() 通过 setState() 更改 _toggle 的值，从而实现更换 widget 效果

（3）创建自定义 Widget

在这里插入图片描述

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'muke flutter',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(title: 'muke learning'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: const Center(
        child: TipsWidget(),
      ),
    );
  }
}

//自定义 Widget
class TipsWidget extends StatelessWidget {
  const TipsWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text("自定义 Widget");
  }
}
  • 自定义 TipsWidget，然后添加至 body 中

（4）添加一个滚动列表

在这里插入图片描述

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'muke flutter',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(title: 'muke learning'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  get _listView => ListView(
        children: const [
          Text("AAA"),
          Text("BBB"),
          Text("CCC"),
          Text("DDD"),
          Text(
            "EEE",
            style: TextStyle(fontSize: 230),
          )
        ],
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:  Center(
        child: _listView,
      ),
    );
  }
}
  • 添加一个 ListView，当超出屏幕时就会滚动

3、手势事件处理

（1）监听 Widget 手势

在这里插入图片描述

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'muke flutter',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(title: 'muke learning'),
    );
  }
}

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 _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("click me : $_count"),
          onPressed: () {
            setState(() {
              _count++;
            });
          },
        ),
      ),
    );
  }
}
  • 点击按钮实现 +1

（2）GestureDetector手势监听

在这里插入图片描述

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'muke flutter',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(title: 'muke learning'),
    );
  }
}

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 _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
          child: Text("click me : $_count"),
          onTap: () {
            setState(() {
              _count++;
            });
          },
          onLongPress: () {
            setState(() {
              _count = 0;
            });
          },
        ),
      ),
    );
  }
}
  • GestureDetetor 只是对 Text 添加了一个手势监听，没有按钮样式
  • onTap()：单机时，加一
  • onLongPress()：长按时，清零

4、进阶

（1）异步 UI

（2）页面跳转

（3）工程结构和资源文件

（4）网络请求

（5）数据存储

Android Flutter开发
weixin_46097862的博客
03-27 2951
Flutter开发
【Flutter】保姆级一小时Flutter开发环境搭建到Demo跑通教程--无需开发者账号
sugoods的博客
04-16 3826
前提 硬件要求 一台MacOS电脑，最好系统是最新的 一台Android手机 一台iOS手机 宽带建议三百兆 硬件参考 黑苹果: MacOS 12.3 华为Mata 30 pro: 鸿蒙 2.0 苹果 Iphone x : 15.4 Android Studio: bumblebee|2020.1.1 XCODE: 13.3 不需要苹果开发者账号 不需要苹果开发者账号，有普通的苹果账号就好。不过普通的苹果账号多一步信任的过程，下面的步骤有详细说明。 简单说明 今天给2016年组装的老台式机重新安装了
大牛手把手带你！移动开发者升职加薪的8项技能，持续更新中
Sunbuyi的博客
01-04 588
前言 前几天去参加了一场面试。面试的题目大多很基础，有一道关于埋点的问题，面试官问我如果不用第三方SDK进行埋点，自己埋点的话，如何减少埋点对业务代码的入侵。 当时没想太多，就说创建一个 BaseView 类，在这个类中进行埋点的操作，然后使需要进行埋点操作的 View 继承这个 Base 类。后来想想，这个方案其实存在很多问题，因为让每个需要埋点的 View 去继承 BaseView 类，说明 View 需要自定义，会耗费很多的时间和精力，对于自带的 Button 等控件的埋点，这种方法又无法实现。所以说
Flutter快速上手，入门教程
最新发布
zyy_give的博客
06-04 2739
Flutter学习指南：从入门到实践的全面教程，保姆级教程：从安装和配置，Flutter SDK安装，项目结构介绍，打包流程
android flutter教程,Android开发 学习Flutter 入门
weixin_42664597的博客
06-05 631
Android开发 学习Flutter 入门一、前言最近项目准备用Flutter混合开发，写写学习的笔记吧，学习Flutter首先需要了解Dart语言，(当然安全上网推荐一个Chrome插件(SetupVpn))，了解Dart相关语法之后，可以到Flutter中文网学习Flutter啦。二、Flutter 环境搭建Flutter中文网有详细的教程，我在Mac和Windows上都已经成功安装。Flu...
快速上手Flutter
zhaochen1127的博客
06-09 3030
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。Dart 是谷歌开发的计算机编程语言，被应用于 Web、服务器、移动应用和物联网等领域的开发。Dart 是面向对象、类定义的、单继承的语言。
[Android Flutter] Flutter开发技术入门指南与实战解析_flutter开发app教程
2401_85388879的博客
07-04 724
最快捷的方式，就是有人可以带着你一起分析，这样学习起来最为高效，所以为了大家能够顺利进阶中高级、架构师，我特地为大家准备了一套高手学习的源码和框架视频等精品Android架构师教程，保证你学了以后保证薪资上升一个台阶。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。
flutter-windows-3.3
09-04
4. **示例代码和模板**：新版本可能包含了一些示例项目，帮助开发者了解如何使用Flutter进行开发，并快速上手。 5. **文档**：SDK的文档通常会介绍Flutter的基本概念、API参考以及最佳实践，对于初学者来说非常重要...
Android开发者如何高效上手Flutter开发？，统统都会
wa32saa的博客
02-02 617
2014.10 - Flutter的前身Sky在GitHub上开源 2015.10 - 经过一年的开源，Sky正式改名为Flutter，低调期 2017.5 - Google I/O正式向外界公布了Flutter，这个时候Flutter才正式进去大家的视野 2018.6 - 距5月Google I/O 1个月的时间，Flutter1.0预览版 2018.12 - Flutter1.0发布，它的发布将大家对Flutter的学习和研究推到了一个新的起点 2019.2 - Flutter...
flutter-windows-3.10.1-stable flutterSDK
05-22
5. **示例应用和文档**：压缩包可能还包含了示例代码和详尽的开发者文档，帮助初学者理解和上手Flutter开发。 使用这个Flutter SDK，开发者可以在Windows环境下进行以下操作： - **创建新项目**：使用`flutter ...
flutter-sdk-1.0.8.zip 免费
01-22
1. `bin` 目录：这个目录包含了Flutter命令行工具，如`flutter`可执行文件，允许开发者在终端中运行Flutter命令，如初始化新项目、构建应用、运行测试等。 2. `packages` 目录：存放Flutter的库和依赖，包括核心库...
一文带你轻松入门Flutter开发
yan1915766026的博客
12-26 9290
Flutter 是谷歌推出的一款开源 UI 框架，旨在帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台等多种平台的开发。其核心优势在于跨平台特性和高性能表现。Flutter 的跨平台能力使其能够在 iOS 和 Android 等主流平台上运行，甚至通过第三方扩展还可支持 MacOS、Windows 以及谷歌的 Fuchsia 操作系统等，这极大地减少了开发成本，让开发者无需为不同平台编写大量重复代码，而是专注于业务逻辑和用户体验的优化。
【安卓开发——Flutter介绍】
muzillll的博客
06-15 2209
Flutter是一个跨平台的应用程序开发框架，由Google创建并维护。它使用Dart编程语言，并支持Android、iOS、Web、Windows、macOS、Linux等多个平台。
【Flutter】graphic图表的快速上手
weixin_52418790的博客
11-24 2551
数据可视化语法和Flutter图表库Graphic快速上手
CSS 超出部分显示省略号
qinglp的博客
05-10 552
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Flutter 快速上手，秒变大前端
淘系技术
09-09 1403
近两年Flutter的热度不断提升，无论在阿里还是外部公司，参与Flutter生态建设的人越来越多。Flutter作为跨端的UI框架，未来也有很大的可能像Rax一样作为集团内营销活动页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KillerNoBlood

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值