在Flutter中实现响应式设计

前端小工
903 阅读7分钟

访问你的应用程序和网站的人期望有一个适合他们设备的用户体验。一个糟糕的用户体验不会让你获得实现你的营销和销售目标所需的用户保留。

用户可用的设备有不同的规格，这就是为什么响应式设计很重要。

在这篇文章中，我们将介绍如何在Flutter中为移动设备创建响应式设计，首先要快速回顾一下为什么响应式设计对Flutter很重要。

为什么响应式设计在Flutter中很重要？

使用响应式设计创建的 Flutter 应用程序会带来一些好处。

您的应用程序在不同的屏幕尺寸上的一致性确保您有更广泛的用户。平板电脑和较小的移动设备可以享受量身定做的用户体验。

此外，一旦您考虑了响应式设计，您的应用程序中的保留率往往会更高。

由于Flutter是网页和移动应用程序的一个很好的选择，响应式设计确保您的应用程序的吸引力是一致的，无论使用的设备大小如何，都能给用户一个无缝的体验。

不言而喻，如果你将响应性的因素纳入你的应用程序，它也可以防止负面评价。在App store上有超过200万个应用程序，在Google Play store上有超过300万个。大多数用户根据评论来决定下载哪些应用程序。

你会希望在这些评论中处于有利的一面。因此，你应该将响应性纳入你的应用开发清单。

Flutter中响应式设计的选项

Flutter中的响应式设计没有一个放之四海而皆准的解决方案。在您的Flutter应用程序中，有不同的方法来获得响应性。

根据官方文档，一些流行的方法包括如下。

LayoutBuilder

[LayoutBuilder](https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html)有一个构建器属性，可以为我们提供BoxConstraint 对象，其中有特定小组件的约束信息。我们可以使用maxWidth 和maxHeight 等信息来确定我们要如何呈现我们的显示。

这些值将帮助我们根据分配给我们小部件的尺寸限制来调整我们的显示。更重要的是，当这些值因屏幕旋转等事件而改变时，LayoutBuilder 将调用我们的build 函数，该函数根据我们的新约束条件重建小部件。

MediaQuery

这个 [MediaQuery](https://api.flutter.dev/flutter/widgets/MediaQuery/of.html)类提供给我们的不仅仅是widget的尺寸，还有我们的应用程序在运行时的整个屏幕尺寸和当时的设备方向。

每当这些配置发生变化时，我们的build 方法也会被调用，这确保我们的widget树被重建以反映最新的变化。

AspectRatio

[AspectRatio](https://api.flutter.dev/flutter/widgets/AspectRatio-class.html)是一个小部件，它试图将孩子的尺寸调整到一个特定的长宽比。
小部件首先尝试布局限制所允许的最大宽度。小部件的高度是通过对宽度应用给定的长宽比来确定的，表示为宽度与高度的比率。

在Flutter中实现响应性的一个更简单的方法

虽然文档中提供了很好的选择，但本文将探索一种更简单的响应式设计方法。建议你适当地评估一下，以了解它是否是适合你的应用程序的方法。

由于Flutter的开源性质和Flutter社区的协作努力，有两个包可以用来实现响应性。

我们将在本教程中介绍 FlutterScreenUtil。

入门

首先，我们将建立一个简单的用户界面屏幕，看起来像下面的图片。

Flutter Responsive Design Phone

在为移动应用程序创建用户界面时，最好不要对我们的小部件的尺寸进行硬编码，而是使用百分比来表示我们的尺寸。在Flutter中，这可以通过MediaQuery 类来实现。

为了创建上面的屏幕，这里是我们正在使用的代码片段。

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          body: Padding(
            padding: EdgeInsets.all(20),
            child: SingleChildScrollView(
              child: SizedBox(
                width:double.infinity,
                child: Column(
        children: [
                Container(
                  height:MediaQuery.of(context).size.height/2,
                  width: MediaQuery.of(context).size.width/2,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage('assets/family.png'), fit: BoxFit.cover)),
                ),

                Text("Lorem Ipsum",
                    style: TextStyle(fontSize: 40, fontWeight: FontWeight.w700)),
                SizedBox(
                  height: 20,
                ),
                Text(
                    "Lorem Ipsum is simply dummy text of the printing and typesetting Industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                    style: TextStyle(fontSize: 16, color: Colors.grey)),


        ],
      ),
              ),
            ),
          )),
    );
  }
}

从上面的图片可以看出，我们的文字在大屏幕上很难读到。
我们只需在我们的pubspec.yaml 文件中加入我们想要的包的依赖性。

要做到这一点，在你的终端运行以下命令。

flutter pub add flutter_screenutil

初始化软件包

为了使用FlutterScreenUtil包，你首先需要在你的应用程序中初始化父部件，在我们的例子中是MaterialApp 。
这看起来像这样。

@override
Widget build(BuildContext context) {
  return ScreenUtilInit(
    designSize: Size(360, 690),
    builder: ()=> MaterialApp(
        title: 'Responsiveness Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home:  HomePage()),
  );
}

设计尺寸部件是可选的，如果不提供，将默认使用下面的值。

static const Size defaultSize = Size(360, 690);

我喜欢使用FlutterScreenUtil包的扩展函数。要做到这一点，只需将该包导入到你的库中。

import 'package:flutter_screenutil/flutter_screenutil.dart';

对于我们有高度值的地方，我们会附加上它的扩展函数。对于宽度值和文本大小也是如此。

这看起来就像下面的代码。

Container(
    width: 70,
    height:250,
    child: Text("Responsive Design", style:TextStyle(fontSize: 18))
)


Container(
padding: EdgeInsets.all(10),
  height:MediaQuery.of(context).size.height/2,
  width: MediaQuery.of(context).size.width/2,
  decoration: BoxDecoration(
      image: DecorationImage(
          image: AssetImage('assets/family.png'), fit: BoxFit.cover)),
),


Container(
    width: 70.w, //Scaled based on the screen's width;
    height:250.h, //Scaled based on the screen's height;
    child: Text("Responsive Design", style:TextStyle(fontSize: 18.sp))//Adapted Font
)
Container(
padding: EdgeInsets.all(10.r),///Adapt according to the smaller of width or height
  height:0.5.sh,//50% of our screen height
  width: 0.5.sw,//50% of our screen width
  decoration: BoxDecoration(
      image: DecorationImage(
          image: AssetImage('assets/family.png'), fit: BoxFit.cover)),
),

一旦我们对我们的初始代码进行必要的修改，使用FlutterScreenUtil包的扩展值，我们的HomePage 类现在应该是这样的。

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
   return SafeArea(
      child: Scaffold(
          body: Padding(
            padding: EdgeInsets.all(20.r),
            child: SingleChildScrollView(
              child: SizedBox(
                width:double.infinity,
                child: Column(
        children: [
                Container(
                  height:0.5.sh,
                  width: 0.5.sw,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage('assets/family.png'), fit: BoxFit.cover)),
                ),

                Text("Lorem Ipsum",
                    style: TextStyle(fontSize: 40.sp, fontWeight: FontWeight.w700)),
                SizedBox(
                  height: 20.h,
                ),
                Text(
                    "Lorem Ipsum is simply dummy text of the printing and typesetting Industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
                    style: TextStyle(fontSize: 16.sp, color: Colors.grey)),

        ],
      ),
              ),
            ),
          )),
    );
  }
}

如果我们运行我们的应用程序，我们会有以下结果。

之前

Flutter Responsive Design Tablet Before Flutter Responsive Design Phone Before Flutter Responsive Design Before Phone 2

运行后

Flutter Responsive Design Tablet After Flutter Responsive Design Phone After Flutter Responsive Design After Phone 2

从上面的图片中，你可以看到小部件是如何根据设备尺寸调整自己的大小，以完美地适应每一个设备，主要的收获是，这是用很少的几行代码实现的。

Responsive Sizer的工作方式与FlutterScreenUtil类似，安装过程也与上面的软件包类似。你只需要为它添加导入，并使用相同的扩展来适应宽度和高度。

最后的思考

一致的UI设计需要响应性。这些包使得在这方面很容易实现，而不需要很多行代码。

希望你能在你的下一个应用程序中探索这一点，如果你以前没有尝试过这个，就能更容易地完成工作。

The postAchieving responsive design in Flutterappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝