Flutter 中的響應式框架

image

貓哥說

這是個自動管理響應界面處理的組件，比較適合在 flutter web 的項目中。

自動管理了你的 Resizing、最大、最小尺寸、Scaling 縮放比例，但是我沒有發現布局的控制，但是這已經很不錯了，又可以少寫代碼了。

  • 最小尺寸效果

https://gallery.codelessly.com/flutterwebsites/minimal/?utm_medium=link&utm_campaign=demo#/

  • Flutter.dev 官網

https://gallery.codelessly.com/flutterwebsites/flutterwebsite/?utm_medium=link&utm_campaign=demo

image
image

老鐵記得 轉發 ，貓哥會呈現更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/404904528

原文

https://medium.com/flutterdevs/responsive-framework-in-flutter-74b8b2a360a9

代碼

https://github.com/ducafecat/getx_quick_start

參考

正文

image

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

往期

開源

GetX Quick Start

https://github.com/ducafecat/getx_quick_start

新聞客戶端

https://github.com/ducafecat/flutter_learn_news

strapi 手冊譯文

https://getstrapi.cn

微信討論群 ducafecat

系列集合

譯文

https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/

開源項目

https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/

Dart 編程語言基礎

https://space.bilibili.com/404904528/channel/detail?cid=111585

Flutter 零基礎入門

https://space.bilibili.com/404904528/channel/detail?cid=123470

Flutter 實戰從零開始 新聞客戶端

https://space.bilibili.com/404904528/channel/detail?cid=106755

Flutter 組件開發

https://space.bilibili.com/404904528/channel/detail?cid=144262

Flutter Bloc

https://space.bilibili.com/404904528/channel/detail?cid=177519

Flutter Getx4

https://space.bilibili.com/404904528/channel/detail?cid=177514

Docker Yapi

https://space.bilibili.com/404904528/channel/detail?cid=130578

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容