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

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

抽屉

抽屉

在这里插入图片描述

根据预览 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
了解本专栏 订阅专栏 解锁全文 超级会员免费看
geeksoarsky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Flutter 抽屉效果
WangQingLei0307的博客
07-17 2150
在开发过程中我们可能会用到抽屉效果，弹出的界面我们可以进行很多操作，在原生开发中相比大家对这都不陌生，那么Flutter中抽屉效果是如何实现的呢？ 首先感谢两位大佬提供资料，两位大佬的博客分别为大队辅导猿、rhyme_lph。如果也可以看一下两位大佬的详细接收，我这里只介绍实现和使用，下面先上效果图。 这个我们主要使用的Flutter提供的组件就是drawers，那我们具体如何实现呢，由于直接使用drawers，会出现指定抽屉宽度，无法进行修改宽度，这里我就要处理一下。 下面还是老样子，我直接上.
Flutter Drawer 侧滑菜单、抽屉
10-26
Flutter Drawer 侧滑菜单、抽屉
Flutter UI基础 - Drawer 抽屉视图与自定义header
迦南的专栏
07-28 1063
移动开发中，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 444
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 项目工程化》序言
geeksoarsky的博客
07-18 410
序言 Flutter 项目工程化 《Flutter 项目工程化》一书是Flutter 快速开发实战专栏的上册，笔者以快速命名是因为 “完成要比完美更重要”，“快速推进，打破常规”，“天下武功，唯快不破”，对于如今迅猛发展的互联网，也是如此。要知道，用户多变，所以唯一能够抓住机会的办法就是快。 在互联网行业，要成就一个项目，idea 一文不值，不仅是在中国，在哪都一样。笔者希望读者通过《Flutter 项目工程化》这本书能把你的想法在技术层面上来讲从不可行到可行，提高你的执行力，最终做成一款好的APP。 由于
《Flutter 项目工程化》第三章 3.3 GetX 国际化
geeksoarsky的博客
07-18 891
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 213
昼夜模式持久化存储状态管理初始化主题状态完善切换主题视图逻辑演示版本提交 GetX自带切换主题API，首先检查是否是黑夜模式，如果是切换为白天模式，否则切换为黑夜模式。 核心代码如下： Get.changeTheme(Get.isDarkMode? ThemeData.light(): ThemeData.dark()); 修改设置页面视图布局代码太简单不再讲解，全部代码如下， lib/page/menu/settings.dart import 'package:flutter/material.dar
Flutter中的抽屉组件Drawer
越陌度阡
12-27 1586
1. 配置抽屉组件 1. drawer 左侧抽屉。值的类型为Widget； 2.endDrawer 右侧抽屉。值的类型为Widget； 代码示例： import "package:flutter/material.dart"; class CategoryPage extends StatefulWidget { CategoryPage({Key key}) : super(key: key); _CategoryPageState createState() => .
Flutter升级dart至3.1.0开发版之后遇到orientation.dart没有SystemChrome.setEnabledSystemUIOverlays报错的解决办法
最新发布
SohkStudio的博客
04-20 987
打开文件：~/.pub-cache/hosted/mirrors.tuna.tsinghua.edu.cn%47dart-pub%47/orientation-1.3.0/lib/orientation.dart。修改后：SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: overlays);修改前：SystemChrome.setEnabledSystemUIOverlays(overlays);保存，运行，问题解决。
《Flutter 实战开发旅行社交手机APP》第二章 地图模块 2.1 Flutter 集成高德地图
geeksoarsky的博客
08-27 901
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 632
隐私声明持久化存储状态管理视图演示版本提交 持久化存储 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 471
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 427
第四章 用户相关 整个 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 378
视图层 列表视图，包括上拉加载，下拉刷新，骨架装载器、自定义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
《Flutter 项目工程化》第三章 3.2 GetX 路由管理
geeksoarsky的博客
07-18 374
GetX 路由管理 路由管理 新建路由文件和路由表文件 mkdir lib/router cd lib/router touch router.dart router_map.dart router_map.dart 定义了命名路由表 import 'package:flutter_locyin/menu/about.dart'; import 'package:flutter_locyin/menu/language.dart'; import 'package:flutter_locyin/menu/
Flutter团队协作中的组件化与工程化解决方案
- **统一环境设置**：确保团队成员在执行`flutter`命令时使用的SDK环境与项目内部平台子工程的环境变量一致，这可能涉及到配置全局或工作区级别的环境变量，以避免因环境差异导致的问题。 - **工程结构标准化**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

geeksoarsky

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

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

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

打赏作者

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

抵扣说明：

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

余额充值