Flutter 入门实战 一

最新推荐文章于 2024-05-14 01:40:44 发布
最新推荐文章于 2024-05-14 01:40:44 发布
阅读量396 收藏 1
点赞数
分类专栏： 前端 文章标签： dart app ios flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jessieeeeeee/article/details/112395179
版权

APP 导航框架与常用功能实现

APP 首页框架搭建

首先，先新建这些文件：
在这里插入图片描述
tab_navigator.dart 文件代码如下：

import 'package:flutter/material.dart';
import 'package:xiecheng/pages/home_page.dart';
import 'package:xiecheng/pages/my_page.dart';
import 'package:xiecheng/pages/search_page.dart';
import 'package:xiecheng/pages/travel_page.dart';

class TabNavigator extends StatefulWidget {
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator> {
  final _defaultColor = Colors.grey;
  final _activeColor = Colors.blue;
  int _currentIndex = 0;
  final PageController _controller = PageController(
    initialPage: 0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: [
          HomePage(),
          MyPage(),
          SearchPage(),
          TravelPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          _controller.jumpToPage(index);
          setState(() {
            _currentIndex = index;
          });
        },
        type: BottomNavigationBarType.fixed, //把lable进行固定
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.home,
              color: _activeColor,
            ),
            title: Text(
              '首页',
              style: TextStyle(
                color: _currentIndex != 0 ? _defaultColor : _activeColor,
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.search,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.search,
              color: _activeColor,
            ),
            title: Text(
              '搜索',
              style: TextStyle(
                color: _currentIndex != 1 ? _defaultColor : _activeColor,
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.camera_alt,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.camera_alt,
              color: _activeColor,
            ),
            title: Text(
              '旅拍',
              style: TextStyle(
                color: _currentIndex != 2 ? _defaultColor : _activeColor,
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.account_circle,
              color: _defaultColor,
            ),
            activeIcon: Icon(
              Icons.account_circle,
              color: _activeColor,
            ),
            title: Text(
              '我的',
              style: TextStyle(
                color: _currentIndex != 3 ? _defaultColor : _activeColor,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

home_page.dart 文件代码如下：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('首页'),
      ),
    );
  }
}

my_page.dart 文件代码如下：

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('我的'),
      ),
    );
  }
}

search_page.dart 文件代码如下：

import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('搜索'),
      ),
    );
  }
}

travel_page.dart 文件代码如下：

import 'package:flutter/material.dart';

class TravelPage extends StatefulWidget {
  @override
  TravelPageState createState() => TravelPageState();
}

class TravelPageState extends State<TravelPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('旅拍'),
      ),
    );
  }
}

最后将 main.dart 的代码进行微小的修改：
在这里插入图片描述
就可以运行啦：
在这里插入图片描述

轮播图 Banner 功能开发

轮播图需要用到的 swiper 插件，我们可以去 pub 网站上去找：
在这里插入图片描述
打开 pub 网站，搜索 swiper 即可：
在这里插入图片描述
这时候我们查看该插件的 Installing，里面会告诉你如何引入该插件：
在这里插入图片描述
这时候我们按照它说的步骤做就好啦：
在这里插入图片描述
引入后 VSCode 的右上角会出现一个下载的标志，点击下载即可；

然后编辑 home_page.dart 里的代码：

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _imageUrls = [
    'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1976529436,2778459069&fm=26&gp=0.jpg',
    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3597917999,2966077325&fm=26&gp=0.jpg',
    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3352739916,685169444&fm=26&gp=0.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Container(
              height: 160,
              child: Swiper(
                itemCount: _imageUrls.length,
                autoplay: true,
                itemBuilder: (BuildContext context, int index) {
                  return Image.network(
                    _imageUrls[index],
                    fit: BoxFit.fill,
                  );
                },
                pagination: SwiperPagination(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

运行界面如下：
在这里插入图片描述

自定义 AppBar 实现滚动渐变

修改 home_page.dart 的代码，如下：

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

const APPBAR_SCROLL_OFFSET = 100; //设置滚动最大距离

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _imageUrls = [
    'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1976529436,2778459069&fm=26&gp=0.jpg',
    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3597917999,2966077325&fm=26&gp=0.jpg',
    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3352739916,685169444&fm=26&gp=0.jpg',
  ];

  double appBarAlpha = 0.0;

  _onScroll(offset) {
    double alpha = offset / APPBAR_SCROLL_OFFSET;
    if (alpha < 0.0) {
      alpha = 0.0;
    } else if (alpha > 1.0) {
      alpha = 1.0;
    }
    setState(() {
      appBarAlpha = alpha;
    });
    // print(appBarAlpha);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          MediaQuery.removePadding(
            //把顶部预留的安全区域去掉
            removeTop: true,
            context: context,
            child: NotificationListener(
              //监听列表的滚动
              onNotification: (scrollNotification) {
                if (scrollNotification is ScrollUpdateNotification &&
                    scrollNotification.depth == 0) {
                  //滚动且是列表滚动的时候
                  _onScroll(scrollNotification.metrics.pixels);
                }
              },
              child: ListView(
                children: [
                  Container(
                    height: 160,
                    child: Swiper(
                      itemCount: _imageUrls.length,
                      autoplay: true,
                      itemBuilder: (BuildContext context, int index) {
                        return Image.network(
                          _imageUrls[index],
                          fit: BoxFit.fill,
                        );
                      },
                      pagination: SwiperPagination(),
                    ),
                  ),
                  Container(
                    height: 800,
                    child: ListTile(
                      title: Text('阿巴阿巴阿巴'),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Opacity(
            //自定义AppBar
            opacity: appBarAlpha,
            child: Container(
              height: 80,
              decoration: BoxDecoration(color: Colors.white),
              child: Center(
                child: Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: Text('首页'),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

运行界面：
在这里插入图片描述

网络编程与数据存储技术相关经验和技巧

基于Http实现网络操作

如何用 http 库做 get 请求?

  • 在 pubspec.yaml 中引入 http 插件；
  • 调用 http.get 发送请求；
Future<http.Response> fetchPost() {
	return http.get('https://jsonplaceholder.typicode.com/posts/1');
}

http.get() 返回一个包含 http.Response 的 Future：

  • Future：是与异步操作一起工作的核心 Dart 类。它用于表示未来某个时间可能会出现的可用值或错误；
  • http.Response：类包括一个成功的 HTTP 请求接收到的数据；

如何用 http 库做 post 请求？

  • 在 pubspec.yaml 中引入 http 插件；
  • 调用 http.post 发送请求；
Future<http.Response> fetchPost() {
	return http.post('https://jsonplaceholder.typicode.com/posts/1');
}

http.post() 返回一个包含 http.Response 的 Future：

  • Future：是与异步操作一起工作的核心 Dart 类。它用于表示未来某个时间可能会出现的可用值或错误；
  • http.Response：类包括一个成功的 HTTP 请求接收到的数据；

如何将 Response 转换成 Dart object？

虽然发出网络请求很简单，但如果要使用原始的 Future<http. Response> 并不简单。为了让我们可以开开心心的写代码,我们可以将 http.Response 转换成我们自己的 Dart 对象。

创建一个 CommonModel 类

首先，我们需要创建一个 CommonModel 类,它包含我们网络请求的数据。它还将包括一个工厂构造函数，它允许我们可以通过 json 创建个 CommonModel 对象。
在这里插入图片描述

将 http.Response 转换成一个 CommonModel 对象

在这里插入图片描述

如何将请求结果展示在界面上？

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

异步：Future 与 FutureBuilder 实用技巧

什么是 Future？

在这里插入图片描述

Future 的常见用法？

在这里插入图片描述

使用 future.then 获取 future 的值与捕获 future 的异常

在这里插入图片描述
在这里插入图片描述

结合 async await

在这里插入图片描述

future.whenComplete

在这里插入图片描述

future.timeout

在这里插入图片描述

什么是 FutureBuilder？

FutureBuilder 是一个将异步操作和异步 UI 更新结合在一起的类,通过它我们可以将网络请求,数据库读取等的结果更新的页面上。

FutureBuilder 的构造方法
FutureBuilder({Key key, Future<T> future, T initialData, @required AsyncWidgetBuilder<T> builder})

在这里插入图片描述
在这里插入图片描述

FutureBuilder 的使用？

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

JSON 解析与复杂模型转换实用技巧

应该是有哪种 JSON 序列化方式？

在这里插入图片描述

如何序列化？

在这里插入图片描述
在这里插入图片描述

复杂 JSON 解析？

如何解析对象中的数组？

在这里插入图片描述
解析：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

提示效率：在线转换 JSON TO Dart

基于 shared_preferences 本地存储操作

什么是 shared_preferences？

在这里插入图片描述

如何使用 shared_preferences？

在这里插入图片描述
在这里插入图片描述

shared_preferences 有哪些常用的 API？

存储相关

在这里插入图片描述

读取相关

在这里插入图片描述

基于 shared_preferences 实现计数器 Demo

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

嘻嘻的妙妙屋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Flutter入门与实战：日期选择器
09-15
在本文中，我们将深入探讨Flutter框架中的日期选择器，这对于任何想要开发Android或跨平台应用程序的开发者来说都是一个重要的知识点。Flutter，Google推出的开源UI工具包，以其高性能、丰富的自定义能力和热重载...
Flutter入门与实战：标签切换栏
09-16
在本文中，我们将深入探讨Flutter框架中的标签切换栏（Tab Bar）的实现和应用，这对于初学者和有经验的开发者来说都是一个非常实用的功能。Flutter是Google开发的开源UI工具包，它允许开发者构建高性能、高保真度的...
Flutter实战
weixin_34376562的博客
05-27 194
经过一个月的努力，终于出成果了。 一个功能齐全的 flutter 金融理财APP项目，使用Node作为后台系统，使用了少量plugin，大体功能自己封装。 源码在GitHub，以便学习交流。github.com/zhongmeizhi… 寻找Flutter的爱好者，一起探讨交流学习。 ...
2024年Android最全Flutter完整开发实战详解(十四、混合开发打包 Android 篇)，2024年最新大厂面试经验
最新发布
2301_82241983的博客
05-14 633
也就是说，架构师必须能够准确得理解需求，然后用软件工程的思想，把需求转化和分解成可用计算机语言实现的程度。经验的积累是需要一个时间过程的，这个过程谁也帮不了你，是需要你去经历的。只有具备这样的能力，架构师才能看清系统的整体，掌控全局，这也是架构师大局观的形成基础。如下图所示，不知道你注意过没有，在插件安装之后，所有带原生代码的插件，都会以路径和插件名的。脚本，让它快速支持这个能力，如下图片所示，图片中为省略的部分脚本代码，完整版可见。文件，实现原生代码的引用注册， 而这个过程对你完全是无感的。
flutter实战
wang_yong_hui_1234的博客
02-28 1304
本篇会用小示例的方式，更全面的使用flutter，进一步的强化如何在项目中开发。 一，列表显示 加载一个列表如下效果 1，准备数据 在项目lib下创建一个person.dart实例用于存放数据 class Person{ const Person({ this.name, this.address, this.imageUrl, }); final String ...
Flutter项目实战
学习新知识，争做新青年
04-30 294
高仿Sunri App使用flutter开发，后端Spring boot开发
Flutter入门与实战：菜单弹出框
09-15
在本文中，我们将深入探讨Flutter框架中的菜单弹出框，这是一种常见的用户界面元素，用于提供多个操作选项。Flutter以其丰富的自定义能力和跨平台兼容性，为开发者提供了多种创建菜单弹出框的方式。让我们一起探索...
Flutter入门与实战：日期范围选择器
09-17
在本文中，我们将深入探讨 Flutter 开发中的一个关键组件——日期范围选择器。Flutter 是 Google 推出的一款用于构建高性能、美观的原生移动应用程序的开源框架，它使用 Dart 语言编写，支持快速开发和热重载功能。...
Flutter实战详解--高仿好奇心日报
2401_84132544的博客
04-05 571
考虑到文章的篇幅问题，我把这些问题和答案以及我多年面试所遇到的问题和一些面试资料做成了PDF文档《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！考虑到文章的篇幅问题，我把这些问题和答案以及我多年面试所遇到的问题和一些面试资料做成了PDF文档[外链图片转存中…(img-cFEl4btt-1712266319475)][外链图片转存中…(img-8LJmHcYS-1712266319475)]
Flutter技术入门与实战
爱红旗渠
03-18 251
Flutter技术入门与实战 思维导图 防止博客图床图片失效，防止图片源站外链： http://www.processon.com/chart_image/5c6b961fe4b056ae2a0ddca7.png) 思维导图在线编辑链接： https://www.processon.com/view/5c6b961fe4b056ae2a0ddca4 ...
《Flutter技术入门与实践》——[中]亢少军
Yejia Sun的博客
04-03 1234
目录 第一章 开启Flutter之旅 第二章 Flutter基础知识 第三章 Dart语言简述 第四章 常用组件 第五章 Material Design风格组件 第六章 Cupertino风格组件 第七章 页面布局 第八章 手势 第九章 资源和图片 第十章 路由及导航 第十一章 组件装饰和视觉效果 第十二章 动画 第十三章 Flutter插件开发 第十四章 开发工具及使用技巧 第十五章 测试与发布...
【Flutter实战】移动技术发展史
老孟Flutter
06-09 1801
老孟导读：大家好，这是【Flutter实战】系列文章的第一篇，这并不是一篇Flutter技术文章，而是介绍智能手机操作系统、跨平台技术的演进以及我对各种跨平台技术看法的文章。 智能手机操作系统 塞班（Symbian）系统 后浪们可能都没有听说过塞班系统，而很多前浪们也会诧异，塞班是智能手机操作系统吗？让我们先来看下智能手机的定义： 智能手机，是指像个人电脑一样，具有独立的操作系统，独立的运行空间，可以由用户自行安装软件、游戏、导航等第三方服务商提供的程序，并可以通过移动通讯网络来实现无线网络接入的...
新手入门必备的Flutter技术解析与实战手册
Android23333的博客
11-24 402
Flutter 是 Google 推出的一套开源跨平台UI框架，可以快速地在Android、iOS和Web平台上构建高质量的原生用户界面。 Flutter 优点众多：可以保存并重载；可以将空间集合、动画库及架构组合起来，设计更加丰富和灵活的界面；可以借助渲染引擎及高性能本地代码运行，以达到跨平台设备的高质量用户体验... 总结一下就是——利用Flutter构建的应用在运行效率上会和原生应用差不多，甚至更好。最重要的一点是，Flutter是完全免费、开源的。如今，Flutter在世界范
[Android Flutter] Flutter开发技术入门指南与实战解析
嘴巴吃糖了
12-30 297
自从 2018 年 12 月，谷歌发布了 Flutter 1.0稳定版本，至今 Flutter 已经发布到了 2.10 版本，几乎每次版本发布都会解决数千个问题、合入数千个PR，官方的持续的更新，让整个 Flutter 生态越来越强大，Flutter已俨然成为了世界上最流行的跨平台框架之一。现已有超过 200W+开发者，及 35W+App 通过 Flutter 构建，[Stackoverflow]研究显示：的开发者喜欢Flutter,的开发者希望在未来几年内改用Flutter。」
Flutter实战一Flutter聊天应用（十六）
咖啡花园
08-02 5404
在上一篇文章《Flutter实战一Flutter聊天应用（十五）》中，我们完成了登陆屏幕。在用户登陆成功后，会在本地创建一个LandingInformation文件，以使应用程序在启动时可以判断用户的登陆状态。在main.dart文件中，我们在main方法执行runApp之前使用existsSync方法判断LandingInformation文件是否存在。判断结果会传递给TalkcasuallyAp
Flutter实战一Flutter聊天应用（二）
热门推荐
咖啡花园
06-06 1万+
随着项目的代码越来越多，我们会碰到各种问题，所以我们需要学习一下如何使用IntelliJ定位并解决问题。我们可以在IntelliJ IDE上调试在模拟器/仿真器或真机设备上运行的Flutter应用程序，使用IntelliJ编辑器可以： 选择一个设备或模拟器来调试应用程序。 查看控制台消息。 在代码中设置断点。 在运行时检查变量并评估表达式。 IntelliJ编辑器在您的应用程序运行时会显示系统日志，
Flutter开发实战
m0_75198698的博客
05-09 193
你可以使用Flutter的各种内置小部件来构建你的应用程序UI。在安装好Flutter之后，你可以使用Flutter命令行工具来创建一个新的Flutter项目。在命令行中运行`flutter create my_flutter_app`，其中`my_flutter_app`是你的项目名称。安装完成后，你可以在命令行运行`flutter doctor`命令来检查你的Flutter环境是否配置正确。编辑完你的应用程序后，你可以运行你的Flutter应用程序。好的，下面是一个简单的Flutter开发实战教程。
Flutter实战教程：从入门到精通
入门篇（第1章至第7章）主要介绍了Flutter的历史背景、基础组件和布局技巧，帮助读者构建基本的UI界面。这部分内容强调实践，通过丰富的示例和图片，使读者快速熟悉Flutter的开发环境和基本操作。 进阶篇（第8章至...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值