Changes are usual for an app configuration. When the user rotates the phone either vertically or horizontally, the keyboard appears.

更改通常是针对应用程序配置的。 当用户垂直或水平旋转电话时，将出现键盘。

The release of foldable smartphones, multi-window features for Android and Catalyst (the project allowing users to run iOS apps on macOS) for iOS, has uncovered unlimited variations of screen sizes.

适用于iOS的可折叠智能手机，适用于Android和Catalyst的多窗口功能(允许用户在macOS上运行iOS应用程序的项目)的发布，揭示了屏幕尺寸的无限变化。

If you want your app design to look polished, your app is supposed to appropriately “react” to configuration changes.

如果您希望应用程序设计看起来更加优美，则应该对应用程序进行适当的“React”以应对配置更改。

从业务角度看响应式设计 (Responsive Design From a Business Perspective)

Responsive design is a design and development technique allowing an application, website or system to adjust to the size of a user’s screen. It will optimize a user’s browsing experience by making a web page/application responsive for the specific device.

响应式设计是一种设计和开发技术，允许应用程序，网站或系统调整为用户屏幕的大小。 通过使网页/应用程序响应特定设备，它将优化用户的浏览体验。

The concept of responsive design lies in using one set of code that adapts to different layout changes corresponding to various devices (smartphones, tablets, and desktop computers).

响应式设计的概念在于使用一组代码来适应与各种设备(智能手机，平板电脑和台式计算机)相对应的不同布局更改。

响应式设计目标 (Responsive Design Goals)

1. Larger audience. The more devices an app can be run on, the wider audience it will attract.更大的观众群。 应用程序可以运行的设备越多，它将吸引更多的受众。
2. Lead users to the purchase. I believe there must be an emotional component pushing people to move intuitively on the user path. Simply speaking, it’s thinking ahead on all user stories.引导用户购买。 我相信必须有一个情感因素促使人们在用户路径上直观地前进。 简而言之，它正在考虑所有用户故事。
3. Brand awareness. A beautiful design makes your brand easy to recognize among competitors.品牌意识。 精美的设计使您的品牌在竞争对手中易于识别。

There has been a significant audience transition in favor of mobile browsing. The responsive design is the easiest way to reach users across multiple devices and ensures a smooth user experience.

受众群体已经发生了重大转变，支持移动浏览。 响应式设计是跨多个设备吸引用户并确保流畅用户体验的最简单方法。

During the development stage, we use the rule called “let the mobile version go first”.

在开发阶段，我们使用称为“让移动版本优先”的规则。

This approach is convenient because it’s always easier to adjust the design created for mobile devices to a larger screen (the remaining space can be filled with content).

这种方法很方便，因为将为移动设备创建的设计调整为更大的屏幕总是比较容易的(剩余空间可以填充内容)。

In other words, if we have a simple thing we can turn it into a complex thing. The reverse process is more complicated.

换句话说，如果我们有一个简单的东西，我们可以将其变成一个复杂的东西。 反向过程更加复杂。

为什么必须在Flutter中使用响应式设计 (Why Using a Responsive Design in Flutter Is a Must)

Designers love magic, however, the execution process is not as easy in real life as we want it to be. If you decide to use Flutter, your designers will forget the “it’s impossible” phrase for good.

设计师喜欢魔术，但是在现实生活中执行过程并不像我们希望的那么容易。 如果您决定使用Flutter ，您的设计师将永远忘记“这是不可能的”一词。

Flutter provides many widgets and classes to ease the implementation of the ideas designers may have.

Flutter提供了许多小部件和类来简化设计师可能具有的想法的实现。

1. AspectRatio

   纵横比

2. CustomSingle

   CustomSingle

3. ChildLayout

   子布局

4. CustomMultiChildLayout

   CustomMultiChildLayout

5. FittedBox

   配件盒

6. FractionallySizedBox

   小数框

7. LayoutBuilder

   LayoutBuilder

8. MediaQuery

   媒体查询

9. MediaQueryData

   MediaQueryData

10. OrientationBuilder

    OrientationBuilder

键盘变更处理 (Keyboard Changes Processing)

In most cases, apps include text fields, and whenever a user interacts with an app, the keyboard appears.

在大多数情况下，应用程序包含文本字段，每当用户与应用程序进行交互时，就会出现键盘。

The Scaffold widget automatically processes the keyboard changes, solving linking issues. It has a resizeToAvoidBottomInset field which controls the behavior of MediaQueryData.viewInsets.

脚手架小部件会自动处理键盘更改，从而解决链接问题。 它具有resizeToAvoidBottomInset字段，该字段控制MediaQueryData.viewInsets的行为。

使用MediaQuery定义配置 (Using MediaQuery to Define Configuration)

You can use MediaQuery to get the real-time size of the window. It suggests the size and orientation of the app.

您可以使用MediaQuery来获取窗口的实时大小。 它建议应用程序的大小和方向。

The MediaQuery widget is useful if you want to make decisions based on the complete context rather than on just the size of the particular widget.

如果您要基于完整的上下文而不是仅基于特定窗口小部件的大小来做出决定，则MediaQuery小窗口很有用。

The number of orientations is limited (for instance, portrait only).

方向的数量是有限的(例如，仅纵向)。

使用LayoutBuilder类 (Use the LayoutBuilder Class)

LayoutBuilder is a simplified version of MediaQuery, created for basic size requests.

LayoutBuilder是简化版本MediaQuery ，基本尺寸请求创建。

It is a widget that provides the dimensions of its parent so that you know how much space you have for the widget and are able to build the child component accordingly.

它是一个小部件，提供其父部件的尺寸，以便您知道该部件有多少空间，并能够相应地构建子部件。

From its builder property, you get a BoxConstraints object. You can adjust the display based on the constraint’s properties (device’s height, device’s width, the aspect ratio, or another property).

从其builder属性中，您可以获得BoxConstraints对象。 您可以根据约束的属性(设备的高度，设备的宽度，纵横比或其他属性)调整显示。

For example, if maxWidth is greater than the width breakpoint, return a Scaffold object with a row that has a list on the left.

例如，如果maxWidth大于宽度断点，则返回一个Scaffold对象，该对象的行在左侧有一个列表。

If it’s narrower, return a Scaffold object with a drawer containing that list. When the constraints change, the build function runs.

如果较窄，则返回带有包含该列表的抽屉的Scaffold对象。 当约束发生变化时，构建函数将运行。

使用OrientationBuilder类 (Use the OrientationBuilder Class)

The OrientationBuilder widget is pretty similar to LayoutBuilder. From its builder property, you get the Orientation object.

OrientationBuilder小部件与LayoutBuilder非常相似。 从其builder属性中，您可以获取Orientation对象。

For example, you can use OrientationBuilder to change the number of columns of GridView.

例如，您可以使用OrientationBuilder更改GridView的列数。

使用FittedBox类 (Use the FittedBox Class)

Often, you have to scale the text depending upon the parent widget size. You can either use fixed values for various platforms or let the widget scale regarding the parent widget size.

通常，您必须根据父窗口小部件的大小来缩放文本。 您可以为各种平台使用固定值，也可以根据父窗口小部件的大小来缩放窗口小部件。

The text is resized accordingly. In general, you can use other types of BoxFit. You can see how each of them behaves in the image below:

文本将相应调整大小。 通常，您可以使用其他类型的BoxFit 。 您可以在下图中看到它们的行为：

使用AspectRatio小部件 (Use the AspectRatio Widget)

When developing an app, you can neglect its size, but you must take into consideration the aspect ratio.

在开发应用程序时，您可以忽略其大小，但是必须考虑纵横比。

Regardless of the size of the device, it can be either wide, thin, or square. Flutter assists you at this point by providing the AspectRatio widget that sizes the child value to a specific aspect ratio.

无论设备的大小如何，它都可以是宽，薄或方形。 目前，Flutter通过提供AspectRatio小部件来为您提供帮助，该小部件可将子值调整为特定的宽高比。

使用灵活和扩展的类 (Use Flexible and Expanded Classes)

Flexible and Expanded are two widgets that you can use inside Row, Column, or Flex to give their children the flexibility to expand to fill the available space.

Flexible和Expanded是两个小部件，您可以在Row ， Column或Flex内部使用它们，以使其子级灵活地扩展以填充可用空间。

The difference is that the Expanded widget requires the child to fill the available space while Flexible does not. You might want to use Flexible and Expanded widgets to get a flexible UI that works with percentages rather than hardcoded values.

不同之处在于，“ Expanded小部件需要子级填充可用空间，而“ Flexible则不需要。 您可能要使用“ Flexible和“ Expanded窗口小部件来获取一个灵活的UI，该UI使用百分比而不是硬编码值。

使用FractionallySizedBox小部件 (Use FractionallySizedBox Widgets)

Sometimes your design calls for dimensions that are relative, for example, a button occupies 80% of the app’s width, whereas the margin takes only 10%. FractionallySizedBox can cope with that.

有时，您的设计需要相对的尺寸，例如，按钮占应用程序宽度的80％，而边距仅占10％。 FractionallySizedBox可以解决这个问题。

Wrap the child you want to be sized with FractionallySizedBox. Give it a height and/or width factor (0.8 means 80% of the available size) and use alignment to control where exactly the fractionally sized widget is supposed to be.

用FractionallySizedBox包裹您要调整大小的孩子。 给它一个高度和/或宽度因子(0.8表示可用大小的80％)，并使用对齐方式控制小数大小的小部件应该位于的确切位置。

You can also use FractionallySizedBox with no child for fractionally sized whitespace.

您也可以将不带子级的FractionallySizedBox用于分数大小的空白。

You’ll probably want to wrap this FractionallySizedBox in a flexible widget so it plays well with a row or a column.

您可能需要将此FractionallySizedBox包裹在一个灵活的小部件中，以便与行或列配合使用。

CustomMultiChildLayout (CustomMultiChildLayout)

CustomMultiChildLayout is a more complex widget developed for advanced layout users, stay tuned, we’ll discuss it in our next technical blog post.

CustomMultiChildLayout是为高级布局用户开发的更复杂的小部件，请继续关注，我们将在下一篇技术博客文章中进行讨论。

If you struggle with Flutter app development, inVerita is glad to help.

如果您在Flutter应用程序开发方面遇到困难 ， inVerita将很乐意为您提供帮助。

有用的链接 (Useful Links)

1. Flutter responsive layout

   响应式布局

2. Responsive design

   响应式设计

3. Responsive design for Flutter

   Flutter的响应式设计

4. Source code

   源代码

Best of luck,

祝你好运

Nazar Cybulskij

纳扎尔·西布尔斯基(Nazar Cybulskij)

Originally published at inveritasoft.com on February 25, 2020

最初于 2020 年2月25日 发布在 inveritasoft.com 上