1、flutter_ScreenUtil插件简介

flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局。

插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸,根据不同屏幕进行缩放,能满足大部分屏幕场景。

github:https://github.com/OpenFlutter/flutter_ScreenUtil

这个轮子功能还不是很完善,但是也在一点点的进步,这也算是国内现在最好的Flutter屏幕适配插件了,又不足的地方你可以自己下载源码进行修改,并使用。

个人觉的今年在国内应该是Flutter的爆发年,也会有更多更好用的插件诞生。

2、flutter_ScreenUtil的引入和使用

因为是第三方包,所以还需要在pubspec.yaml文件中进行注册依赖。在填写依赖之前,最好到github上看一下最新版本,因为这个插件也存在着升级后,以前版本不可用的问题。

dependencies:
     flutter_screenutil: ^0.5.2

需要在每个使用的地方进行导入:

import 'package:flutter_screenutil/flutter_screenutil.dart';

3、初始化设置尺寸

在使用之前请设置好设计稿的宽度和高度,传入设计稿的宽度和高度,注意单位是px。

我们公司一般会以Iphone6的屏幕尺寸作设计稿,这个习惯完全是当初公司组长的手机是Iphone6的,审核美工稿的时候,可以完美呈现,所以就沿用下来了(我想估计老总的手机早升级了)。

ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

这句话的引入一定要在有了界面UI树建立以后执行,如果还没有UI树,会报错的。比如我们直接放在类里,就会报错,如果昉在build方法里,就不会报错。

适配尺寸

这时候我们使用的尺寸是px.

  • 根据屏幕宽度适配:width:ScreenUtil().setWidth(540);
  • 根据屏幕高度适配:height:ScreenUtil().setHeight(200);
  • 适配字体大小:fontSize:ScreenUtil().setSp(28,false);

配置字体大小的参数false是不会根据系统的"字体大小"辅助选项来进行缩放。

根据学到的知识,来设置一下昨天的轮播图片问题。

  • 首先在home_page.dart里,用import进行引入。
  • 在build方法里,初始化设计稿尺寸,ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);.
  • 给Container设置高和宽的值height: ScreenUtil().setHeight(333),和width: ScreenUtil().setWidth(750),

全部代码如下:

import 'dart:convert';

import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> {   String homePageContent='正在获取数据';   @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('百姓生活+'),
        ),
        body:FutureBuilder(
            future: getHomePageContent(),
            builder: (context,snapshot){
              if(snapshot.hasData){
                var data = json.decode(snapshot.data.toString());
                List<Map> swiper = (data['data']['slides'] as List).cast();
                return Column(
                  children: <Widget>[
                    SwiperDiy(swiperDataList: swiper,)
                  ],
                );
              }else{
                  return Center(
                    child: Text("加载中"),
                  );
              }
            },
        )
    );
  }
} 轮播组件
class SwiperDiy extends StatelessWidget {   final List swiperDataList;   SwiperDiy({Key key,this.swiperDataList}):super(key:key);   @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(context);
    return Container(
      height: ScreenUtil().setHeight(333),
      width: ScreenUtil().setWidth(750),
      child: Swiper(
          itemCount: swiperDataList.length,
          itemBuilder: (BuildContext context,int index){
              return Image.network("${swiperDataList[index]['image']}",fit:BoxFit.fill);
          },
          pagination: SwiperPagination(),
          autoplay: true,
      ),
    );
  }
}

重新运行一下项目,效果图下图所示:

11-Flutter移动电商实战-首页_屏幕适配方案和制作的更多相关文章

  1. Flutter移动电商实战 --(11)首页_屏幕适配方案和制作

    1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...

  2. 18-Flutter移动电商实战-首页_火爆专区商品接口制作

    1.获取接口的方法 在service/service_method.dart里制作方法.我们先不接收参数,先把接口调通. Future getHomePageBeloConten() async{   ...

  3. Flutter实战视频-移动电商-11.首页_屏幕适配方案讲解

    11.首页_屏幕适配方案讲解 国人写的屏幕适配插件: https://github.com/OpenFlutter/flutter_screenutil 最新版本是0.5.1 在pubspec.yam ...

  4. 17-Flutter移动电商实战-首页_楼层区域的编写

    1.楼层标题组件 该组件非常简单,只接收一个图片地址,然后显示即可: class FloorTitle extends StatelessWidget {  final String picture_ ...

  5. Flutter移动电商实战 --(3)底部导航栏制作

    1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平 ...

  6. Flutter移动电商实战 --(49)详细页_Stack制作底部工具栏

    一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角 ...

  7. Flutter移动电商实战 --(15)商品推荐区域制作

    1.推荐商品类的编写 这个类接收一个List参数,就是推荐商品的列表,这个列表是可以左右滚动的. /*商品推荐*/ class Recommend extends StatelessWidget { ...

  8. 微信小程序电商实战-首页(上)

    嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图:   架构图. ...

  9. Flutter 移动端屏幕适配方案和制作

    flutter_screenutil插件 flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! 注意:此插件仍处于开发阶段,某些API可能尚未推出. 安装依赖: 安装之前请查 ...

随机推荐

  1. SGU 128. Snake --- 暴力枚举+并查集+贪心+计算几何

    <传送门> 128. Snake time limit per test: 0.25 sec. memory limit per test: 4096 KB There are N poi ...

  2. 虚拟机CentOS创建/使用快照

    快照 1.什么是快照 说的直白一点,就是创建一个备份.当执行了不可逆的错误操作后,可以通过快照用来恢复系统 2.创建快照的三种模式 挂载状态下创建快照 开机状态下创建快照 关机状态下创建快照 3.如何 ...

  3. SpringBoot获得application.properties中数据的几种方式

    转:https://blog.csdn.net/qq_27298687/article/details/79033102 SpringBoot获得application.properties中数据的几 ...

  4. 工信部要求应用商店上新 App 检查 IPv6,这里有一份 IPv6 快速部署指南

    7 月 25 日,工业和信息化部信息通信发展司组织召开部署推进 IPv6 网络就绪专项行动电视电话会议.会议指出,加快推进 IPv6 规模部署,构建高速率.广普及.全覆盖.智能化的下一代互联网,是互联 ...

  5. CephFS 使用

    原文:https://www.jianshu.com/p/c22ff79c4452 之前介绍了 RBD 的使用方法,有了 RBD,远程磁盘挂载的问题就解决了,但 RBD 的问题是不能多个主机共享一个磁 ...

  6. 关于django数据库迁移 以及显示未检测到更改的问题

    No changes detected 显示这样的原因 数据库迁移代码步骤: 今天在所有数据库的时候对数据库进行了删除,重新迁移数据库映射,但是却发现终端给出了这样的信息. '>>> ...

  7. 十二、vue中watch原理

    1.普通的watch 2.对象属性的watch:   对象和数组都是引用类型,引用类型变量存的是地址,地址没有变,所以不会触发watch.这时我们需要进行深度监听,就需要加上一个属性 deep,值为 ...

  8. js原型链的看法

    原型链 对象 对象: 1,函数对象:由function创造出来的函数 2,普通对象:除开函数对象之外的对象,都是普通对象 **即普通对象obj是构造函数Object的一个实例,因此: obj.__pr ...

  9. 非洲affrike单词

    affrike 英文单词,含义是非洲,非洲大陆. 中文名:非洲 外文名:affrike 目录 释义 affrike noun名词 非洲,也用做africa 1.Word Origin and Hist ...

  10. trackingjs+websocket+百度人脸识别API,实现人脸签到

    在公司做了个年会的签到.抽奖系统.用java web做的,用公司的办公app扫二维码码即可签到,扫完码就在大屏幕上显示这个人的照片.之后领导让我改得高大上一点,用人脸识别来签到,就把扫二维码的步骤改成 ...