flutter 主题切换用_在我的Flutter应用中切换主题

flutter 主题切换用

Part of the ‘A Work in Progress’ Series

“ 正在进行 的 工作 ”系列的一部分

In this article, I’ll walk through how the MVC framework library package allows a user to ‘switch’ the color theme of a Flutter app with a click of the mouse. The code involved will be reviewed giving you further insight into how the MVC framework is set up to allow such capabilities in your own Flutter app.

在本文中，我将逐步介绍MVC框架库程序包如何允许用户单击鼠标来“切换” Flutter应用程序的颜色主题。 将审查所涉及的代码，使您进一步了解如何设置MVC框架以允许在自己的Flutter应用程序中使用此类功能。

进行中的工作 (A Work In Progress)

This is part of the ‘A Work in Progress’ series of articles covering the progress of a simple ‘ToDo’ app I’m working on called WorkingMemory. The intent of this series is to document the implementation of every and all aspects of this app, its construction as well as its use of the MVC framework library package, mvc_application.

这是“ 正在进行 的 工作 ”系列文章的一部分，该系列文章介绍了我正在使用的名为WorkMemory的简单“ ToDo”应用程序的进度。 本系列的目的是记录该应用程序各个方面的实现，其构造以及对MVC框架库包mvc_application的使用 。

我喜欢截图。 单击要点。 (I Like Screenshots. Click For Gists.)

As always, I prefer using screenshots over gists to show concepts rather than just show code in my articles. I find them easier to work with, and easier to read. However, you can click or tap on them to see the code in a gist or in Github. Ironically, it’s better to read this article about mobile development on your computer than on your phone. Besides, we mostly program on our computers and not on our phones. For now.

与往常一样，我更喜欢使用屏幕截图而不是要点来显示概念，而不是仅在文章中显示代码。 我发现它们更易于使用和阅读。 但是，您可以单击或点击它们以查看要点或Github中的代码。 具有讽刺意味的是，最好在计算机上阅读这篇文章，而不是在手机上阅读有关移动开发的文章。 此外，我们大多在计算机上编程，而不是在手机上编程。 目前。

没有运动图片，没有社交媒体 (No Moving Pictures, No Social Media)

There will be gif files in this article demonstrating aspects of the topic at hand. However, it’s said viewing such gif files is not possible when reading this article on platforms like Instagram, Facebook, etc. They may come out as static pictures or simply blank placeholder boxes. Please, be aware of this and maybe read this article on medium.com

本文中将有gif文件，演示手头主题的各个方面。 但是，据说在Instagram，Facebook等平台上阅读本文时，无法查看此类gif文件。它们可能以静态图片形式出现，或者只是空白的占位符框。 请注意这一点，也许可以在medium.com上阅读此文章

Let’s begin.

让我们开始。

Other Stories by Greg Perry

Greg Perry的其他故事

In truth, this article was inspired by Ritesh Sharma’s own article, Switching themes in Flutter apps like a fox! His approach involved using Norbert Kozsir’s own library package, dynamic_theme, to help in dynamically switching an app’s theme when a user selects one from a menu dropdown.

实际上，本文的灵感来自Ritesh Sharma自己的文章，“ 像狐狸一样在Flutter应用中切换主题！ 他的方法涉及使用Norbert Kozsir自己的库程序包dynamic_theme ，以帮助用户从菜单下拉菜单中选择一个主题时动态切换该应用程序的主题。

Switching themes in Flutter apps like a fox!

像狐狸一样在Flutter应用中切换主题！

这是一个包装主题 (It’s A Wrapping Theme)

I noted to use the DynamicTheme library package, it has to be the ‘root widget’ for the app (i.e. the first State object instantiated for the app). Implementing a library package as the ‘root widget’ has been a practice I’ve seen many times before. You see, doing so ensures the library package’s setState() function calls will then rebuild the MaterialApp widget or the CupertinoApp widget it wraps around.

我注意到要使用DynamicTheme库包，它必须是应用程序的“根小部件”(即，为应用程序实例化的第一个State对象)。 将库程序包实现为“根窗口小部件”是我以前多次看到的一种做法。 您会看到，这样做可以确保库程序包的setState ()函数调用将重新构建它包装的MaterialApp小部件或CupertinoApp小部件。

For example, below is a screenshot Ritesh Sharma’s sample code where you can readily see the MaterialApp widget is indeed enclosed by the DynamicTheme widget. Personally, I don’t like this approach. What if you have other widgets that need to achieve the same ability? Are you then endlessly wrapping widgets around other widgets? It would get pretty ugly frankly when all that’s needed is ready access to a particular State object.

例如，下面是Ritesh Sharma的示例代码的屏幕快照，您可以在其中轻松地看到MaterialApp小部件确实包含在DynamicTheme小部件中。 我个人不喜欢这种方法。 如果您还有其他需要实现相同功能的小部件怎么办？ 然后，您是否将小部件无休止地包裹在其他小部件周围？ 坦率地说，当所有需要的一切都准备好访问特定的State对象时，它将变得非常丑陋。

All you need is access to the State object whose build() function contains the MaterialApp or CupertinoApp widget for your app. When you have access to that State object, you have access to its setState() function. Do you see what I mean? Anyway, there’s another approach. A simpler, cleaner approach in my opinion. This approach involves a ready-made framework that provides access to that particular State object. That’s what this article is all about.

您所需要做的就是访问State对象，该对象的build ()函数包含您应用的MaterialApp或CupertinoApp小部件。 当您有权访问该State对象时，就可以访问其setState ()函数。 你明白我的意思吗？ 无论如何，还有另一种方法。 我认为这是一种更简单，更清洁的方法。 这种方法涉及一个现成的框架，该框架提供对特定国家对象的访问。 这就是本文的全部内容。

main.dart

main.dart

设定主题 (Set Your Theme)

Before we look at this alternative, let’s continue with this approach so as to understand the fundamentals involved in achieving this ‘dynamic theming.’ And so, when changing the app’s theme, it all comes down to calling the MaterialApp widget or CupertinoApp widget again, but with a different value for its named parameter, theme. That means it all comes down to calling the State object’s build() function that contains that MaterialApp widget or CupertinoApp widget, and of course, that’s achieved by calling that State object’s setState() function. Follow so far?

在我们研究替代方案之前，让我们继续使用这种方法，以了解实现这种“动态主题”的基本原理。 因此，更改应用程序的主题时，一切都归结为再次调用MaterialApp小部件或CupertinoApp小部件，但是其命名参数theme的值不同。 这意味着归结为调用包含该MaterialApp小部件或CupertinoApp小部件的State对象的build ()函数，当然，这是通过调用该State对象的setState ()函数来实现的。 遵循到目前为止？

You can see this process depicted below in the screenshot on the left-hand side. When a new theme is selected, for example, the ‘themedWidgetBuilder’ function is called again and returns the app’s MaterialApp widget, but not before passing in that variable, theme, of type, ThemeData. That tells you the ‘themedWidgetBuilder’ function is called again and again in some State object’s build() function somewhere, and indeed, that is the case when you now look below at the screenshot on the right-hand side.

您可以在左侧的屏幕截图中看到以下所示的过程。 例如，当选择一个新主题时，将再次调用'themedWidgetBuilder'函数，并返回应用程序的MaterialApp小部件，但不会在传入该主题类型为ThemeData的变量theme之前返回 。 这告诉您在某些状态对象的build ()函数中的某个位置一次又一次调用'themedWidgetBuilder'函数，的确如此，当您现在在下面的右侧屏幕截图中查看时，就是这种情况。

Note, the ‘theme’ is passed in from a private instance variable called, _data. The build() function is called again and again, as you know, with every call to the State object’s setState() function. And so, in a nutshell, that’s how the ‘dynamic change’ in the app’s theme is achieved. However, I will explain further and show you when and where the setState() function is called.

注意，“主题”是从称为_data的私有实例变量传入的。 如您所知，每次对State对象的setState ()函数的调用都会一次又一次地调用build ()函数。 简而言之，这就是实现应用程序主题中“动态变化”的方式。 但是，我将进一步解释，并向您展示何时调用setState ()函数。

main.dart and dynamic_theme.dart

main.dart和dynamic_theme.dart

改变你的主题 (Change Your Theme)

In Ritesh Sharma’s sample code, when a user does select another theme option from the menu dropdown, the function, changeColor(), is called. It’s there where the function, DynamicTheme.of(), obtains the State object, DynamicThemeState. That State object’s setThemeData() function is then called passing in the selected ‘ThemeData’ value. This is all highlighted by the first red arrow below.

在Ritesh Sharma的示例代码中，当用户确实从菜单下拉菜单中选择另一个主题选项时，将调用函数changeColor ()。 在这里，函数DynamicTheme.of ()获得State对象DynamicThemeState。 然后调用该State对象的setThemeData ()函数，以传递选定的“ ThemeData”值。 所有这些都通过下面的第一个红色箭头突出显示。