《Flutter 项目工程化》第三章 3.1 抽屉视图

最新推荐文章于 2025-10-22 10:55:18 发布
最新推荐文章于 2025-10-22 10:55:18 发布
阅读量172 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Flutter 项目工程化 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/geeksoarsky/article/details/118875556
本文介绍了在Flutter项目中实现抽屉视图的工程化过程，包括抽屉内的多个页面如设置、主题和语言切换等。通过新建/lib/menu目录并创建相关视图文件，详细讲解了抽屉布局的实现。虽然抽屉布局简单，但重点在于阐述如何结合Flutter路由进行页面跳转，并预告后续将集成Getx进行路由管理和Provider进行状态管理，以及使用shared_preferences实现持久化存储。

抽屉

抽屉

在这里插入图片描述

根据预览 GIF 可以看出抽屉相关的不止一个页面，分析预览图得出会有设置页面，主题页面，切换语言页面，关于页面一共五个页面。页面过多，且都归为抽屉类，新建 /lib/menu 目录，新建这几个视图文件：

mkdir lib/menu
cd lib/menu
touch menu.dart about.dart language.dart settings.dart theme.dart

设置页、主题页等这四个页面留空，抽屉页完成后再慢慢完善。设置页代码如下，举一反三，其他页面代码不再列出。
lib/menu/settings.dart

import 'package:flutter/material.dart'
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Flutter 抽屉效果
WangQingLei0307的博客
07-17 2311
在开发过程中我们可能会用到抽屉效果，弹出的界面我们可以进行很多操作，在原生开发中相比大家对这都不陌生，那么Flutter中抽屉效果是如何实现的呢？ 首先感谢两位大佬提供资料，两位大佬的博客分别为大队辅导猿、rhyme_lph。如果也可以看一下两位大佬的详细接收，我这里只介绍实现和使用，下面先上效果图。 这个我们主要使用的Flutter提供的组件就是drawers，那我们具体如何实现呢，由于直接使用drawers，会出现指定抽屉宽度，无法进行修改宽度，这里我就要处理一下。 下面还是老样子，我直接上.
《Flutter 项目工程化》序言
geeksoarsky的博客
07-18 492
序言 Flutter 项目工程化 《Flutter 项目工程化》一书是Flutter 快速开发实战专栏的上册，笔者以快速命名是因为 “完成要比完美更重要”，“快速推进，打破常规”，“天下武功，唯快不破”，对于如今迅猛发展的互联网，也是如此。要知道，用户多变，所以唯一能够抓住机会的办法就是快。 在互联网行业，要成就一个项目，idea 一文不值，不仅是在中国，在哪都一样。笔者希望读者通过《Flutter 项目工程化》这本书能把你的想法在技术层面上来讲从不可行到可行，提高你的执行力，最终做成一款好的APP。 由于
Flutter Drawer 侧滑菜单、抽屉
10-26
Flutter Drawer 侧滑菜单、抽屉
Flutter UI基础 - Drawer 抽屉视图与自定义header
迦南的专栏
07-28 1168
移动开发中，drawerLayout抽屉视图是比较常用的一种控件。一般将用户的头像，用户名等信息在抽屉视图中呈现。 drawer中也可以提供一些选项，比如跳转去设置页，跳转去用户资料页面等等。 Flutter提供了Drawer组件；结合ListView等组件，开发者可以快速地制作出抽屉视图。 使用material中的UserAccountsDrawerHeader 使用material中的UserAccountsDrawerHeader，设置accountName和currentAccountPictu
drawer , drawer menu , slide out , 拉出菜单 , 抽屉菜单 , 抽屉视图
08-22
drawer , drawer menu , slide out , 拉出菜单 , 抽屉菜单 , 抽屉视图
【自学Flutter】1.4 使用字体
技术宅-Nopi的博客
06-24 530
1.4 使用字体 1.main.dart import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context ){ return Ma...
《Flutter技术入门与实战》——导读
weixin_33743661的博客
01-07 1033
内容简介 本书由资深架构师撰写，从实战角度讲解Flutter,从基础组件到综合案例，从工具使用到插件开发，包含大量精选案例和详细实操步骤，还有配套视频课程可帮助读者快速入门。 Flutter——谷歌完全免费且开源的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 第1章介绍Flutter的基本概念，并搭建第一个Flutt...
【粉丝福利社】微信小程序与云开发从入门到实践
热门推荐
时光隧道
10-12 8万+
近年来，微信小程序这一名词越来越火，其背靠着微信庞大的闭环生态，一经问世就得到了极大的关注。小程序是一种无须专门下载，运行在微信平台内部的微型程序，自2017年1月小程序正式上线到目前为止，其已经更新迭代了多个版本，功能也越来越强大。小程序为人们的生活提供了诸多的便利，在自动售卖机上购买商品、使用共享单车、观看视频与热门资讯，以及听音乐、上网课等生活服务都可以在小程序上完成。
Flutter实战项目：图书阅读应用完整源码解析
最新发布
weixin_42515392的博客
10-22 1030
当网络请求成功返回 JSON 数据后，下一步便是将其映射为 Dart 对象以便在 UI 中使用。直接使用虽然可行，但极易出错且难以维护。因此，采用强类型的实体类并通过自动化工具完成反序列化，是现代 Flutter 开发的标准实践。Book({});当 API 字段命名不符合 Dart 风格时（如 snake_case），可通过@JsonKey显式映射：也可用于指定转换函数：除了局部动画外，Flutter 还支持全局页面跳转动画。通过继承。
《Flutter 项目工程化》第三章 3.3 GetX 国际化
geeksoarsky的博客
07-18 1018
3.3 GetX 国际化切换语言视图share_preferences 持久化存储Getx 状态管理切换语言测试版本提交 首先用户打开抽屉，再点击设置按钮跳转到设置页面，随后选择切换语言或主题。 切换语言视图 设置页面 settings.dart 代码如下： import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'language.dart'; class SettingsPage extends Sta
精选资源
Flutter混合开发组件化与工程化架构
02-24
对于构建Flutter类型应用，因其开发语言Dart、虚拟机、构建工具与平时我们开发Native应用不同且平台虚拟机也不支持，所以需要FlutterSDK来支持，如构建Android应用需要AndroidSDK一样，下载FlutterSDK通常有两种方式...
《Flutter 项目工程化》第三章 3.4 昼夜模式
geeksoarsky的博客
07-19 288
昼夜模式持久化存储状态管理初始化主题状态完善切换主题视图逻辑演示版本提交 GetX自带切换主题API，首先检查是否是黑夜模式，如果是切换为白天模式，否则切换为黑夜模式。 核心代码如下： Get.changeTheme(Get.isDarkMode? ThemeData.light(): ThemeData.dark()); 修改设置页面视图布局代码太简单不再讲解，全部代码如下， lib/page/menu/settings.dart import 'package:flutter/material.dar
Flutter中的抽屉组件Drawer
分享前端工程化、动效魔法与性能之舞！
12-27 2004
Flutter抽屉组件实现指南 本文介绍了Flutter中抽屉组件的实现方法，包括： 基础抽屉配置：通过drawer和endDrawer分别实现左右侧抽屉 DrawerHeader的使用：支持装饰和子组件自定义 UserAccountsDrawerHeader：专门用于用户账号展示，支持头像、名称、邮箱等属性 抽屉内路由跳转：通过Navigator.of(context).pop()关闭抽屉后再跳转 文中提供了完整的代码示例，演示了如何创建带标签页的页面布局，并在抽屉中添加用户信息和菜单项。
《Flutter 实战开发旅行社交手机APP》第二章 地图模块 2.1 Flutter 集成高德地图
geeksoarsky的博客
08-27 1047
Flutter 集成高德地图安装依赖KEY创建应用调试版签名发布版签名高德地图添加 jar 文件：添加权限修改配置按需引入高德定位配置截图版本提交 安装依赖 安装高德定位 Flutter 插件，高德地图 Flutter 插件。定位和地图是分开的，不要混淆。 amap_flutter_location: 2.0.0 amap_flutter_map: 2.0.2 KEY 创建应用 根据插件Readme得知，我们需要前往高德地图开放平台 分别申请 Android 端和 iOS 端的 key。 调试版
《Flutter 项目工程化》第五章 5.4 隐私声明
geeksoarsky的博客
07-19 850
隐私声明持久化存储状态管理视图演示版本提交 持久化存储 lib/utils/sputils.dart ///隐私 static void savePrivacy() { _spf!.setBool('key_privacy', true); } static void clearPrivacy() { _spf!.remove('key_privacy'); } static bool? getPrivacy() { return _spf!.getBool('key_privacy'); }
《Flutter 项目工程化》第四章 4.2 登录注册
geeksoarsky的博客
07-19 553
4.2 登录注册 手机号登录注册 客户端只需要提供手机号和验证码，服务端端检测是否注册，没注册则自动注册，故登录注册客户端实现起来只需要一个页面。 新建用户文件夹和用户注册文件 mkdir lib/page/User touch lib/page/User/login.dart 验证码输入框插件 flutter_verification_box 依赖库 dependencies: · · · flutter_spinkit: ^5.0.0 flutter_verification_b
《Flutter 项目工程化》第四章 4.1二次封装 Dio
geeksoarsky的博客
07-19 543
第四章 用户相关 整个 App 是以用户为中心的，用户必须保持登录状态才能正常使用App，否则跳转到用户登录页。这是一个前后端完全分离的 App ,我已经搭建好了 Laravel API 服务器，使用 JWT 鉴权，即使用 Bear Token 确定用户身份，这就要求我们 App 在发起请求时附带 Token 值，如果 Token 过期但还在刷新周期内，则需要客户端自动刷新 Token , 我们将在此章节完成这些功能。 4.1 Dio 网络请求 安装 Dio 请安装好 Post Man 进行接口调试。
《Flutter 实战开发旅行社交手机APP》第一章 广场模块 1.1 游记列表
geeksoarsky的博客
08-18 473
视图层 列表视图，包括上拉加载，下拉刷新，骨架装载器、自定义AppBar 视图 第三方库 包括上拉加载、下拉刷新 easyrefresh，skeleton 骨架加载器和支持空安全的 swiper 轮播图。 flutter_easyrefresh: ^2.2.1 skeleton_text: ^3.0.0 flutter_swiper_null_safety: ^1.0.2 基本视图 lib/page/Dynamic/Dynamic.dart import 'package:flutter/material
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

geeksoarsky

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

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

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

打赏作者

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

抵扣说明：

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

余额充值