首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter -如何在读取共享首选项后才绘制小部件?

Flutter是一种跨平台的移动应用开发框架,它可以帮助开发者快速构建高性能、美观的移动应用程序。在读取共享首选项后才绘制小部件可以通过以下步骤实现:

  1. 导入shared_preferences库:在Flutter中,可以使用shared_preferences库来读取和写入共享首选项。可以在pubspec.yaml文件中添加依赖并运行"flutter packages get"来导入该库。
  2. 创建共享首选项实例:使用SharedPreferences.getInstance()方法来获取共享首选项的实例。这个方法是异步的,所以可以使用async/await来处理。
  3. 读取共享首选项:使用共享首选项实例的getXXX()方法来读取首选项的值,其中XXX可以是bool、int、double、String等数据类型。例如,可以使用getString()方法来读取一个字符串类型的首选项值。
  4. 根据读取的值来绘制小部件:根据读取到的共享首选项的值来决定小部件的绘制逻辑。可以使用条件语句(如if-else)来根据不同的值来绘制不同的小部件。

以下是一个示例代码,演示了如何在读取共享首选项后绘制小部件:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _isDarkModeEnabled = false;

  @override
  void initState() {
    super.initState();
    _loadPreferences();
  }

  Future<void> _loadPreferences() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool isDarkModeEnabled = prefs.getBool('isDarkModeEnabled') ?? false;
    setState(() {
      _isDarkModeEnabled = isDarkModeEnabled;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _isDarkModeEnabled ? ThemeData.dark() : ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

在上面的示例中,首先在initState()方法中调用_loadPreferences()方法来读取共享首选项。然后在_loadPreferences()方法中,使用SharedPreferences.getInstance()方法获取共享首选项实例,并使用getBool()方法读取名为'isDarkModeEnabled'的布尔型首选项值。如果首选项不存在,则使用??运算符设置默认值为false。最后,使用setState()方法来更新_isDarkModeEnabled变量的值,从而触发小部件的重绘。

在build()方法中,根据_isDarkModeEnabled的值来设置主题,如果为true,则使用ThemeData.dark()主题,否则使用ThemeData.light()主题。然后使用MaterialApp和Scaffold来构建基本的应用程序界面,其中包含一个AppBar和一个居中显示的文本小部件。

这只是一个简单的示例,你可以根据实际需求来扩展和修改代码。如果想了解更多关于Flutter的信息,可以访问腾讯云的Flutter产品介绍页面:Flutter产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutte部件目录-基本部件(一)

使用Flutter的视觉,结构,平台和交互式小部件集合更快地创建漂亮的应用程序。 基本部件 构建您的第一个Flutter应用程序之前,您绝对需要了解这些小部件。...绘制过程中,容器首先应用给定的transform,然后绘制decoration来填满填充范围,然后绘制子组件,最后绘制foregroundDecoration,并填满填充范围。...Ink,用于Material上绘制装饰,允许InkResponse和InkWell飞溅来绘制它们。 布局部件的目录。...该行通过溢出的边上绘制黄色和黑色条纹警告来报告此情况。如果行外有空间,溢出量将以红色字体打印。...这个例外所伴随的细节中所描述的问题是,使用Flexible或Expanded意味着布置所有其他子部件之后的剩余空间必须平等地共享,但是如果传入的垂直约束是无限的,则剩余空间有无限空间。

7.5K20

Flutter 动画系列二》Google工程师带你选择Flutter动画控件

从广义上来说,Flutter动画组件分为两种类型, Drawing-based animations:基于绘制的动画,就像是画画一样,通常都是独立的控件,例如游戏角色或者很难用纯碎的代码来完成的效果。...Flutter中基于核心(组件)的动画又分为两类: 隐式动画控件:只需提供给组件开始、结束值,系统执行动画,比如AnimatedAlign等组件。...如何确定使用隐式动画控件还是显式动画控件?你需要考虑3个问题: 动画是否一直重复,比如音乐播放。 动画值是否不连续,比如一个圆圈,不连续的尺寸变化:->大,->大,->大。...一旦你确定了使用显式动画控件或者隐式动画控件,这个时候你就需要找到对应的组件,你需要的组件是否已经Flutter中内置了?...还有最后一件事情需要考虑:如果你发现由CustomPainter引起的性能问题,你可以像AnimatedWidget一样使用它,但是CustomPainer直接绘制到画布上,而无需标准的小部件构建范例,

68200
  • Flutter 动画系列二》Google工程师带你选择Flutter动画控件

    v=GXIJJkq_H8g 从广义上来说,Flutter动画组件分为两种类型, Drawing-based animations:基于绘制的动画,就像是画画一样,通常都是独立的控件,例如游戏角色或者很难用纯碎的代码来完成的效果...Flutter中基于核心(组件)的动画又分为两类: 隐式动画控件:只需提供给组件开始、结束值,系统执行动画,比如AnimatedAlign等组件。...如何确定使用隐式动画控件还是显式动画控件?你需要考虑3个问题: 动画是否一直重复,比如音乐播放。 动画值是否不连续,比如一个圆圈,不连续的尺寸变化:->大,->大,->大。...一旦你确定了使用显式动画控件或者隐式动画控件,这个时候你就需要找到对应的组件,你需要的组件是否已经Flutter中内置了?...还有最后一件事情需要考虑:如果你发现由CustomPainter引起的性能问题,你可以像AnimatedWidget一样使用它,但是CustomPainer直接绘制到画布上,而无需标准的小部件构建范例,

    71920

    Flutter UI原理

    例如,Container是一个常用的Widget,由几个负责布局,绘制,定位和大小调整的小部件组成。...2、Layer层级 3、Widget与Element Flutter中,Widget的功能是“描述一个UI元素的配置数据”,它就是说,Widget其实并不是表示最终绘制设备屏幕上的显示元素,而只是显示元素的一个配置数据...通常情况下,虽然可以应用程序中使用自定义RenderBox类来实现特定效果,但大多数情况下,调试布局问题的时候需要与RenderObject打交道。...列和行小部件使我们可以轻松地将其他小部件垂直或水平对齐。 Paiting绘画: 例如。 文本和图像小部件允许我们屏幕上显示(“绘制”)一些内容。 Hit-Testing:例如。...Flutter沿着小部件树向下走,并通过部件上调用createElement()来创建第二个包含相应Element对象的树。

    3.3K20

    【译】Flutter架构综述

    其目标是让开发者能够交付在不同平台上感觉自然的高性能应用,尽可能多的代码共享的同时,拥抱存在差异的地方。...Composition 小部件通常由许多其他的、单一用途的小部件组成,这些小部件组合起来可以产生强大的效果。 可能的情况下,设计概念的数量保持最低限度,同时允许总词汇量很大。...Flutter本身广泛使用InheritedWidget作为共享状态框架的一部分,例如应用程序的视觉主题,其中包括颜色和类型样式等属性,这些属性整个应用程序中是普遍存在的。...Platform embedding 正如我们所看到的,Flutter的用户界面不是被翻译成等价的操作系统小部件,而是由Flutter自己构建、布局、合成和绘制。...app 因为Flutter的内容是绘制纹理上的,而且它的widget树完全是内部的,所以Flutter的内部模型中没有像Android视图这样的东西存在的地方,也没有Flutter widgets

    5.6K10

    Flutter性能揭秘之RepaintBoundary

    Flutter会在屏幕上绘制Widget。如果一个Widget的内容需要更新,那就只能重绘了。尽管如此,Flutter同样会重新绘制一些Widget,而这些Widget的内容仍有部分未被改变。...在这篇博客理,我们将探讨Flutter中的RepaintBoundary。我们将看到如何实现RepaintBoundary的演示程序以及如何在您的flutter应用程序中使用它。...示例 正文中,我们将创建一个Stack widget。在里面,我们将添加一个StackFit.expand,并添加两个部件:_buildBackground(),和_buildCursor()。...如果你试图屏幕上移动指针,应用程序将非常滞后,因为它重新绘制背景,需要昂贵的计算。 下面,我们将添加RepaintBoundary。...这是我对RepaintBoundary On User Interaction的一个的介绍,它在使用Flutter时是可行的。

    69820

    Flutter 可能是开发移动应用的最佳解决方案

    然而,自从 2017 年 5 月 Flutter 横空出世,几乎所有移动应用开发公司和个人开发者都转向了这种先进的移动应用开发技术。...Flutter 与一个响应式的现代框架相结合,以便允许开发者可以 Android 和 iOS 平台上构建令人印象深刻的动画、共享代码库和视图。...增强 UI 开发 Flutter 通过将不同的 UI 组件和小部件相结合,使得应用程序功能上更加强大。这个相对较新的 app 开发技术和框架,旨在解决所有的用户界面问题。...相反,Flutter 使用自己的高性能渲染引擎来绘制部件。而且,由于 Flutter 拥有极其精简的 C/C++代码层,它的渲染速度非常快。...结论 使用 Flutter 开发应用程序的可能性是无穷无尽的,这都要归功于它具有丰富的 UI 小部件、高性能渲染引擎,最重要的是,它可以 Dart 上运行。

    1.8K30

    Flutter 旋转轮

    pub 地址:https://pub.dev/packages/flutter_spinwheel 效果演示: 该演示视频展示了如何Flutter中使用自旋轮。...它显示了如何flutter应用程序中使用「flutter_spinwheel」软件包运行「旋转轮」,并显示了当您点击该项目时,旋转器将移动。同样,您将沿顺时针/逆时针的任何方向移动微调器。...**shutterPaint:**如果适用,此属性用于绘制用于绘制快门的设置。此外,它是可定制的。 **onChanged:**此 属性用于每次更改选择时从微调器菜单返回所选值的回调。...itemBuilder中,我们将导航容器小部件部件内,我们将添加一个边距,即容器的高度。他的子属性,我们将添加一个列小部件。在此小部件中,我们将添加两个文本,分别是问题和答案。...项「以外的所有选项,应当绘制边框」指令**确定是否应绘制边框,「onChanged」表示每次更改选择时从微调器菜单返回所选值的回调。

    8.8K20

    Flutter中构建布局 顶

    Flutter的布局机制如何工作。 如何垂直和水平布局小部件如何构建一个Flutter布局。 这是Flutter中构建布局的指南。 您将构建以下屏幕截图的布局: ?...然后本指南回过头来解释Flutter的布局方法,并说明如何在屏幕上放置一个小部件讨论如何水平和垂直放置小部件之后,会介绍一些最常见的布局小部件。...第6步:把它放在一起 最后一步,你将这些碎片组装在一起。 这些小部件安排在ListView中,而不是列中,因为设备上运行应用程序时,ListView会自动滚动。...如果您愿意,可以构建仅使用小部件库中的标准小部件的应用程序。 如何Flutter中布置单个小部件? 本节介绍如何创建一个简单的小部件并将其显示屏幕上。...处理Flutter中的盒子约束:讨论小部件如何受其渲染框限制。 Flutter中添加资产和图像:说明如何将图像和其他资源添加到应用程序包中。

    43.1K10

    Flutter 构建完整应用手册-持久化

    共享偏好设置插件包装iOS上的NSUserDefaults和Android上的SharedPreferences,为简单数据提供持久存储。...建立 我们开始之前,我们需要将shared_preferences插件添加到我们的pubspec.yaml文件中: dependencies: flutter: sdk: flutter...有关Android上共享首选项的更多信息,请访问Android开发人员网站上的共享首选项文档。...读写文件 某些情况下,将文件读取和写入磁盘可能非常方便。 这可用于跨应用程序启动持续保存数据或从互联网上下载数据并保存以供以后脱机使用。...MethodChannel是Flutter用来与主机平台进行通信的类。 我们的测试中,我们无法与设备上的文件系统进行交互。 我们需要与我们的测试环境的文件系统进行交互!

    1.5K20

    革命性web前端框架Flutter详细介绍和学习路径

    Flutter是最流行的框架呢,是没有任何问题的,但它并不是一个最近出现的开发框架。为什么这么说呢? ?...这不仅使Flutter变得更快,而且几乎所有的东西(包括所有的小部件)都可以定制; 2)Dart也可以JIT(Just In Time)编译,开发周期异常快,工作流颠覆常规(包括Flutter流行的亚秒级有状态热重载...Dart可以没有锁的情况下进行对象分配和垃圾回收。就像JavaScript一样,Dart避免了抢占式调度和共享内存(因而也不需要锁)。...Android 自带了 Skia,所以 Flutter Android SDK要比 iOS SDK很多。...Flutter 渲染 UI 控件树并将其绘制到平台画布上。 UI 一致性 Flutter 因为是自己做的渲染,因此iOS和Android的效果基本完全一致。

    3.9K40

    Flutter 开发实战与前景展望 - RTC Dev Meetup

    四大版本,目前总 star 17 k+ 左右,主要活跃掘金社区,id 是恋猫的郭,主要专栏有《Flutter完整开发实战详解》系列等,平时工作负责移动端项目的开发,工作经历从 Android...到 React Native 、Weex 再到如今的 Flutter ,期间也参与过 React 、 Vue 、程序等相关的开发,算是一个大前端的选手吧。...skia 绘制的时候,saveLayer 是比较消耗性能的,比如透明合成、clipRRect 等等都会可能需要 saveLayer 的调用, 而 saveLayer 会清空GPU绘制的缓存,导致性能上的损耗...image PointerDownEvent 是一切的起源, Down 事件中一般不会决出胜利者。 MOVE 和 UP 的时候竞争得到响应。...如下图所示,安装过的插件会出现在 .flutter_plugins 文件中,然后通过读取文件,动态 setting.gradle 和 flutter.gradle 中引入和依赖: image image

    1.9K20

    Swift 中 User Defaults 的读取和写入

    前言 User Defaults 是 Swift 应用程序存储应用启动之间保持的首选项的首选解决方案。它是由属性列表(plist)文件支持的键-值存储。...我强烈建议从一开始就使用这种技术,即使现在可能没有共享首选项的需要,但如果你添加需要从主应用程序中读取或写入首选项的扩展,以后你会感谢自己的。...") } 现在,你可以通过使用静态属性来访问共享的组容器: UserDefaults.group.set(["AAPL", "TSLA"], forKey: "favorite-stocks") 任何使用相同应用组的应用程序或扩展现在都可以读取和写入最喜欢的股票...我 Stock Analyzer 中使用此技术,根据主应用程序中配置的最喜欢的股票填充小部件。...结论 你可以使用 User Defaults 存储首选项并在应用启动之间捕获状态。应用组非常适合与其他应用程序和扩展共享首选项,你需要密切关注可以存储的数据类型。

    29920

    Canonical通过Flutter启用Linux桌面应用程序支持

    Flutter访问Linux中的本机代码 除了通过编写Dart来创建Flutter部件来支持桌面之外,您的Linux桌面应用还可以使用平台渠道或C / C ++的Dart外部功能接口访问所有本机Linux...作为此版本的一部分,我们pub.dev上发布了三个使用Linux本机功能的插件: url_launcher: 提供的URL上启动默认浏览器 shared_preferences: 应用会话之间共享的用户首选项...path_provider: 有关专用目录的路径信息,例如下载,图片等 您可以应用程序中使用这些插件中的每个插件,并作为如何Flutter代码本地访问Linux的示例,例如 Linux implementation...边缘通道中发布应用程序,可以通过Snap Store Desktop客户端或使用命令行来安装它: $ snap install --edge flokk-contacts 有关构建第一个快照并将其发布...对于一个功能更全面的应用程序,该应用程序可以使用Flutter的更多表面积并提供几个程序,我推荐Flutter Gallery,该软件去年进行了重新设计,以支持台式机和移动设备。

    2.7K20

    flutter架构(第四节)

    主要为Flutter系统提供了一个入口,Flutter系统通过该入口访问底层系统提供的服务,例如输入法,绘制surface等。 按照设计,Flutter 控制屏幕上绘制的每个像素。...Flutter部件通过覆盖 build()方法来定义它们的 UI,该方法是将状态转换为 UI 的函数: UI = f(状态) 小型、单一用途的小部件组合在一起以创建更复杂、更专业的小部件来代表您的应用程序...,我们将讨论如何在状态更改时重建 UI ,以及可以使用哪些技术来重建 UI 。...如何使用包中文网 linting 除此之外,我强烈建议为您的项目启用linting。最简单的方法是安装官方?flutter_lints软件包。...入门:创建你的 Flutter 项目 特别是,请阅读最后的“轻松管理 lint 规则”部分。这解释了如何创建一组干净且可维护的规则,您可以应用程序中调整这些规则。

    2.2K10

    2022年Flutter真的会一统大前端吗?

    副标题《理性对待Flutter》 作者:坚果 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括Flutter,程序,安卓...因为 Android TV 只读取远程控制输入,而 Flutter 使用触摸屏和鼠标移动,情况就是这样,孰轻孰重,自己考量。...Flutter 可能会拿出精彩的优化性能。让我们敬请期待,王叔的视频里,对此类问题也做过阐述,地址在这儿。...创建 Flutter 应用程序时,您可以同时使用这两个小部件,但是当我们为 iOS 构建使用 Material 小部件时,该应用程序缺乏原生的外观和感觉。...如果您要开发一个主要依赖第三方插件的应用程序,请检查 SDK 的最新版本是否适用于 Flutter。至于如何检查, 此外,始终首选积极维护的存储库。 最后,Flutter 并不总是很棒。

    2.4K20

    记住,永远都不要在 Flutter 中使用全局变量

    本文中,我们将详细了解全局变量的缺点,并学习如何以更有效的方式管理状态。 Flutter 中的全局变量是什么? 全局变量是公共变量,可以被 Flutter 程序中的每个方法和对象访问。...Flutter 中使用全局变量的缺点 Flutter 中使用全局变量一直受到质疑和批评,通常被认为是不好的做法。以下是使用全局变量的缺点: 1....复杂的代码维护过程 更改或删除一个全局变量会触发一系列事件,因为使用全局变量的小部件和方法将受到影响。 如果要更改全局变量,则必须分析访问全局变量的每个小部件如何受到影响并进行特定且必要的更改。...但是,有些开发人员会使用全局变量,因为他们一个团队中,并且某些情况下不利于更改。 但是,无论应用程序的大小如何,当需要维护代码时,全局变量都会带来挑战。...使用以下代码片段添加和使用 Provider 包插件: dependencies: flutter: sdk: flutter provider: ^3.1.0 Provider 程序包还允许你与多个类共享部件状态

    3.5K30

    跨平台技术演进

    Engine 渲染引擎:负责页面渲染 JavaScript Interpreter JS解释器:执行JS代码,输出结果给渲染引擎 Networking 网络工作组:处理网络请求 UI Backend UI后端:绘制窗口小部件...但H5作为跨平台技术的载体,是如何与不同平台的App进行交互的呢?这时候JSBridge就该出场了。... React 框架中,JSX 源码通过 React 框架最终渲染到了浏览器的真实 DOM 中,而在 React Native 框架中,JSX 源码通过 React Native 框架编译,与Native...渲染引擎依靠跨平台的Skia图形库来实现,依赖系统的只有图形绘制相关的接口,可以最大程度上保证不同平台、不同设备的体验一致性,逻辑处理使用支持AOT的Dart语言,执行效率也比JavaScript高得多...,等浪潮退去,知道谁在裸泳。

    2.4K20
    领券