关于flutter:Flutter-中的响应式框架

3次阅读

共计 8775 个字符，预计需要花费 22 分钟才能阅读完成。

这是个主动治理响应界面解决的组件，比拟适宜在 flutter web 的我的项目中。

主动治理了你的 Resizing、最大、最小尺寸、Scaling 缩放比例，然而我没有发现布局的管制，然而这曾经很不错了，又能够少写代码了。

最小尺寸成果

https://gallery.codelessly.co…

Flutter.dev 官网

https://gallery.codelessly.co…

https://medium.com/flutterdev…

https://github.com/ducafecat/…

https://pub.dev/packages/resp…

Flutter 是 Google 的用户界面工具宝库，用于从一个代码库生成优良的、本地编译的 iOS 和 Android 应用程序。为了构建任何应用程序，咱们从小部件开始ー Flutter 应用程序的构建方块。窗口小部件依据以后的设计和状态形容他们的视图应该相似的内容。它整合了一个文本小部件、行小部件、列小部件、容器小部件等等。

本文利用 Flutter 响应框架软件包对 Flutter 响应框架进行了钻研。有了软件包的帮忙，咱们能够很容易地实现一个响应屏幕。那么让咱们开始吧。

响应式框架会主动调整你的用户界面以适应不同的屏幕尺寸。创立您的用户界面一次，并有它显示像素完满的挪动，平板电脑和桌面！

反对多种显示大小通常意味着屡次从新创立雷同的布局。在传统的 Bootstrap 办法下，构建响应式 UI 是耗时、令人丧气和反复的。此外，让所有像素完满简直是不可能的，简略的编辑须要几个小时。

第一步: 增加依赖项

将依赖项增加到 pubspec.yaml 文件。

依赖性:

dependencies:
  responsive_framework: ^0.1.4

第二步: 导入

import 'package:responsive_framework/responsive_framework.dart';

第三步: 启用 AndriodX

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

你须要别离在你的代码中实现它

在创立相似于响应式框架的 UI 之前，咱们在 main 的 Material 利用部件中增加了 ResponsiveWrapper.builder()。文件中初始化 MaxWith，MinWith 和 Breakpoints 的 List 类型，在它外部调整设施的大小，如挪动设施，平板电脑，桌面，并且主动缩放值是定义的，让咱们了解它与上面的代码援用。

ResponsiveWrapper.builder(BouncingScrollWrapper.builder(context, widget!),
    maxWidth: 1200,
    minWidth: 450,
    defaultScale: true,
    breakpoints: [ResponsiveBreakpoint.resize(450, name: MOBILE),
      ResponsiveBreakpoint.autoScale(800, name: MOBILE),
      ResponsiveBreakpoint.autoScale(800, name: TABLET),
      ResponsiveBreakpoint.autoScale(1000, name: TABLET),
      ResponsiveBreakpoint.resize(1200, name: DESKTOP),
      ResponsiveBreakpoint.autoScale(2460, name: "4K"),
    ],
    background: Container(color: Color(0xFFF5F5F5))
  ),

主动缩放按比例放大和扩大布局，放弃 UI 的准确外观。这就打消了手动调整布局以适应挪动设施、平板电脑和桌面的须要。

在此之后，咱们创立了一个用户配置文件屏幕，其中是用户的图像，以及两种不同类型的列表，其中图像和一些文本曾经给出。

import 'package:flutter/material.dart';
import 'package:responsive_framwork_demo/Constants/Constants.dart';
import 'package:responsive_framwork_demo/device_size.dart';
import 'package:responsive_framwork_demo/model/popular_course_model.dart';
import 'package:responsive_framwork_demo/model/result_model.dart';

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  late List<PopularCourseModel> popularCourseModel;
  late List<ResultModel> resultModel;

  @override
  void initState() {popularCourseModel = Constants.getPopularCourseModel();
    resultModel = Constants.getResultModel();

    super.initState();}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.0,
        title: Text(
          'PROFILE',
          style: TextStyle(
              fontFamily: 'Poppins Medium',
              color: Colors.black,
              fontSize: 15,
              fontWeight: FontWeight.bold,
              letterSpacing: 0.5),
        ),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Container(padding: EdgeInsets.only(top: 20),
          child: Column(
            children: [
              ClipOval(
                child: CircleAvatar(
                  maxRadius: 50,
                  child: Image.asset(
                    'assets/images/mans_img.jpeg',
                    width: DeviceSize.width(context),
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              SizedBox(height: 30,),
              Text(
                'Crowley Singer',
                style: TextStyle(
                    fontFamily: 'Poppins Medium',
                    color: Colors.black,
                    fontSize: 15,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 0.3),
              ),
              Container(margin: EdgeInsets.only(top: 25, left: 20, right: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Column(
                      children: [
                        Text(
                          '22',
                          style: TextStyle(
                              fontFamily: 'Poppins Medium',
                              color: Colors.black,
                              fontSize: 15,
                              fontWeight: FontWeight.bold,
                              letterSpacing: 0.5),
                        ),
                        SizedBox(height: 10,),
                        Text(
                          'Courses',
                          style: TextStyle(
                              fontFamily: 'Poppins Regular',
                              color: Colors.black45,
                              fontSize: 11,
                              fontWeight: FontWeight.bold,
                              letterSpacing: 0.3),
                        ),
                      ],
                    ),
                    Container(
                      height: 32,
                      width: 1,
                      color: Colors.black12,
                    ),
                    Column(
                      children: [
                        Text(
                          '32',
                          style: TextStyle(
                              fontFamily: 'Poppins Medium',
                              color: Colors.black,
                              fontSize: 15,
                              fontWeight: FontWeight.bold,
                              letterSpacing: 0.5),
                        ),
                        SizedBox(height: 10,),
                        Text(
                          'Mentors',
                          style: TextStyle(
                              fontFamily: 'Poppins Regular',
                              color: Colors.black45,
                              fontSize: 11,
                              fontWeight: FontWeight.bold,
                              letterSpacing: 0.3),
                        ),
                      ],
                    ),
                    Container(
                      height: 32,
                      width: 1,
                      color: Colors.black12,
                    ),
                    Column(
                      children: [
                        Text(
                          '48',
                          style: TextStyle(
                              fontFamily: 'Poppins Medium',
                              color: Colors.black,
                              fontSize: 15,
                              fontWeight: FontWeight.bold,
                              letterSpacing: 0.5),
                        ),
                        SizedBox(height: 10,),
                        Text(
                          'Friends',
                          style: TextStyle(
                              fontFamily: 'Poppins Regular',
                              color: Colors.black45,
                              fontSize: 11,
                              fontWeight: FontWeight.bold,
                              letterSpacing: 0.3),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              Container(margin: EdgeInsets.only(top: 30, left: 20, right: 20),
                height: 1,
                color: Colors.black12,
                width: DeviceSize.width(context),
              ),
              Container(margin: EdgeInsets.only(top: 30, left: 20, right: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'YOUR COURSES',
                      style: TextStyle(
                          fontFamily: 'Poppins Medium',
                          color: Colors.black,
                          fontSize: 12,
                          fontWeight: FontWeight.w700,
                          letterSpacing: 0.5),
                    ),
                    Icon(Icons.more_horiz),
                  ],
                ),
              ),
              Container(margin: EdgeInsets.only(top: 10, left: 20, right: 20),
                height: DeviceSize.height(context) / 7,
                // color:Colors.purple,
                child: ListView.separated(separatorBuilder: (BuildContext context, int index) {return SizedBox(width: 10);
                  },
                  scrollDirection: Axis.horizontal,
                  // padding:EdgeInsets.only(left:10),
                  //shrinkWrap: true,
                  itemCount: popularCourseModel.length,
                  itemBuilder: (BuildContext context, int index) {
                    return _buildYourCourseModel(popularCourseModel[index], index);
                  },
                ),
              ),
              Container(margin: EdgeInsets.only(top: 30, left: 20, right: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'YOUR PROGRESS',
                      style: TextStyle(
                          fontFamily: 'Poppins Medium',
                          color: Colors.black,
                          fontSize: 12,
                          fontWeight: FontWeight.w700,
                          letterSpacing: 0.5),
                    ),
                    Icon(Icons.more_horiz),
                  ],
                ),
              ),
              Container(//  height:DeviceSize.height(context),
                width: DeviceSize.width(context),

                margin: EdgeInsets.only(top: 20),

                child: ListView.separated(separatorBuilder: (BuildContext context, int index) {return SizedBox(height: 10);
                  },
                  scrollDirection: Axis.vertical,
                  // padding:EdgeInsets.only(left:10),
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: resultModel.length,
                  itemBuilder: (BuildContext context, int index) {return _buildResultModel(resultModel[index], index);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildYourCourseModel(PopularCourseModel items, int index) {
    return Container(
      width: 70,
      child: Column(
        //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.blueGrey.shade50,
                  offset: const Offset(
                    5.0,
                    5.0,
                  ),
                  blurRadius: 10.0,
                  spreadRadius: 2.0,
                ), //BoxShadow
                BoxShadow(
                  color: Colors.white,
                  offset: const Offset(0.0, 0.0),
                  blurRadius: 0.0,
                  spreadRadius: 0.0,
                ), //BoxShadow
              ],
            ),
            child: ClipOval(
              child: CircleAvatar(
                backgroundColor: Colors.white,
                maxRadius: 30,
                //  child:Image.asset('assets/images/earth.png',height:45,color:Colors.blueAccent,) ,
                child: Padding(padding: EdgeInsets.all(4),
                  child: Image.asset(
                    items.img,
                    fit: BoxFit.cover,
                    scale: 7,
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            child: Container(padding: EdgeInsets.only(top: 0),
              alignment: Alignment.center,
              child: Text(
                items.title,
                style: TextStyle(
                    fontFamily: 'Poppins Medium',
                    fontWeight: FontWeight.w700,
                    letterSpacing: 0.3,
                    fontSize: 11,
                    color: Colors.black),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildResultModel(ResultModel items, int index) {
    return Container(margin: EdgeInsets.only(left: 20, right: 20),

      height: DeviceSize.height(context) / 9,

//     / color:Colors.pink,
      child: Row(
        children: [
          Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.blueGrey.shade50,
                  offset: const Offset(
                    5.0,
                    5.0,
                  ),
                  blurRadius: 10.0,
                  spreadRadius: 2.0,
                ), //BoxShadow
                BoxShadow(
                  color: Colors.white,
                  offset: const Offset(0.0, 0.0),
                  blurRadius: 0.0,
                  spreadRadius: 0.0,
                ), //BoxShadow
              ],
            ),
            child: ClipOval(
              child: CircleAvatar(
                backgroundColor: Colors.white,
                maxRadius: 28,
                //  child:Image.asset('assets/images/earth.png',height:45,color:Colors.blueAccent,) ,
                child: Padding(padding: EdgeInsets.all(4),
                  child: Image.asset(
                    items.img,
                    fit: BoxFit.cover,
                    scale: 7,
                  ),
                ),
              ),
            ),
          ),
          SizedBox(width: 20,),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                items.title,
                style: TextStyle(
                    fontFamily: 'Poppins Medium',
                    color: Colors.black,
                    fontSize: 11.5,
                    fontWeight: FontWeight.w700,
                    letterSpacing: 0.5),
              ),
              SizedBox(height: 5,),
              Text(
                items.subTitle,
                style: TextStyle(
                    fontFamily: 'Poppins Regular',
                    color: Colors.black45,
                    fontSize: 11,
                    fontWeight: FontWeight.w700,
                    letterSpacing: 0.5),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

在这篇文章中，我解释了在 Flutter 响应框架，你能够依据本人的批改和试验，这个小介绍是从咱们这边的 Flutter 响应框架演示。

https://ducafecat.tech/

https://github.com/ducafecat

https://github.com/ducafecat/…

https://getstrapi.cn

https://ducafecat.tech/catego…

https://space.bilibili.com/40…

正文完

flutter

发表至： flutter

2021-07-27

0

关于flutter:Flutter学习第四课SharedPreferences本地存储的简单使用

关于flutter:Flutter-实战17篇动画系列文章带你走进自定义动画

关于flutter:Flutter-读取应用资源并显示

关于flutter:Flutter-第九课组件之Scaffold和AppBar和Drawer和FloatingActionButton

关于后端:不要让这-2-个坏习惯限制了你的成长-极客分享第-40-期

关于flutter:Flutter-中的响应式框架

猫哥说

老铁记得转发，猫哥会出现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40…

原文

代码

参考

注释

响应式框架

实施方案

代码实现

全副代码

总结

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

Flutter 实战从零开始新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

站内搜索

关于flutter:Flutter-中的响应式框架

猫哥说

老铁记得 转发，猫哥会出现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40…

原文

代码

参考

注释

响应式框架

实施方案

代码实现

全副代码

总结

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

Flutter 实战从零开始 新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

站内搜索

老铁记得转发，猫哥会出现更多 Flutter 好文~~~~

Flutter 实战从零开始新闻客户端