猫哥说
这是个主动治理响应界面解决的组件，比拟适宜在 flutter web 的我的项目中。
主动治理了你的 Resizing、最大、最小尺寸、Scaling 缩放比例，然而我没有发现布局的管制，然而这曾经很不错了，又能够少写代码了。
- 最小尺寸成果
https://gallery.codelessly.co...
- Flutter.dev 官网
https://gallery.codelessly.co...
老铁记得 转发 ，猫哥会出现更多 Flutter 好文~~~~
微信群 ducafecat
b 站 https://space.bilibili.com/40...
原文
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=-Xmx1536Mandroid.enableR8=trueandroid.useAndroidX=trueandroid.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
往期
开源
GetX Quick Start
https://github.com/ducafecat/...
新闻客户端
https://github.com/ducafecat/...
strapi 手册译文
https://getstrapi.cn
微信探讨群 ducafecat
系列汇合
译文
https://ducafecat.tech/catego...
开源我的项目
https://ducafecat.tech/catego...
Dart 编程语言根底
https://space.bilibili.com/40...
Flutter 零根底入门
https://space.bilibili.com/40...
Flutter 实战从零开始 新闻客户端
https://space.bilibili.com/40...
Flutter 组件开发
https://space.bilibili.com/40...
Flutter Bloc
https://space.bilibili.com/40...
Flutter Getx4
https://space.bilibili.com/40...
Docker Yapi
https://space.bilibili.com/40...