Flutter轻松实现Adobe全家桶Logo列表功能

版权声明：本文为博主原创文章，未经博主允许不得转载。
https://www.jianshu.com/p/760906fc2879

转载请标明出处：
https://www.jianshu.com/p/760906fc2879
本文出自 AWeiLoveAndroid的博客

本文首发在公众号Flutter那些事，未经允许，严禁转载。

本文配套代码已经传到了github，欢迎朋友们给个star，感谢大家，希望能在帮助大家的同时，麻烦大家给个打赏买口水喝，谢谢大家。

开源仓库地: https://github.com/AweiLoveAndroid/Flutter-learning/

---

Flutter系列博文链接 ↓：

工具安装：

• Flutter从配置安装到填坑指南详解

Flutter基础篇：

• 谷歌Flutter1.0正式版发布
• Flutter基础篇（1）-- 跨平台开发框架和工具集锦
• Flutter基础篇（2）-- 老司机用一篇博客带你快速熟悉Dart语法
• Flutter基础篇（3）-- Flutter基础全面详解
• Flutter基础篇（4）-- Flutter填坑全面总结
• Flutter基础篇（5）-- Flutter代码模板，解放双手，提高开发效率必备
• Flutter基础篇（6）-- 水平和垂直布局详解
• Flutter基础篇（7）-- Flutter更新错误全面解决方案(图文+视频讲解)
• Flutter基础篇（8）-- Flutter for Web详细介绍
• Flutter基础篇（9）-- 手把手教你用Flutter实现Web页面编写
• Flutter1.9升级体验总结（Flutter Web 1.9最新版本填坑指南）

Flutter进阶篇：

• Flutter进阶篇（1）-- 手把手带你快速上手调试Flutter项目
• Flutter进阶篇（2）-- Flutter路由详解
• Flutter进阶篇（3）-- Flutter 的手势（GestureDetector）分析详解
• Flutter进阶篇（4）-- Flutter的Future异步详解
• Flutter进阶篇（5）-- 使用Flutter创建插件详解并发布到Pub库
• Flutter进阶篇（6）-- PageStorageKey、PageStorageBucket和PageStorage使用详解
• Flutter进阶篇（7）-- Flutter路由轻量级框架FRouter

Dart语法系列博文链接 ↓：

Dart语法基础篇：

• Flutter基础篇（2）-- 老司机用一篇博客带你快速熟悉Dart语法(这是Dart语法系列的第一篇)
• Dart的语法详解系列篇（二）-- 类与函数
• Dart的语法详解系列篇（三）-- mixin入门
• Dart的语法详解系列篇（四）-- 泛型、异步、库等有关详解
• Dart2.6正式版发布，支持编译为native可执行文件

Dart语法进阶篇：

• Dart语法进阶篇（一）-- Dart源码的排序算法详解

---

本文首发在公众号Flutter那些事，未经允许，严禁转载。

Adobe公司的产品大家应该都是很熟悉了，我们就看它的产品Logo，一看就可以记住好几个，比如：PS、Ai、Pr、Dw等。而且绝大多数Logo都是很一致的，外面要么方正，要么是带圆弧的矩形，中间是两个英文字母，第一个字母大写，第二个字母小写。总之，一看就可以让人记住，真是具有的魔性Logo，不得不佩服Adobe公司设计Logo的团队的创意人才，今天我要给大家带来的是使用Flutter实现Adobe公司的Logo并让它们同屏展出，全部用代码实现，不借助任何外部工具，一次性带领大家看看这些有趣的Logo。作者写文章不容易，觉得好看的话，点个赞支持一下吧，谢谢大家。

本文内容图文并茂，希望大家可以认真看完。为了避免大家犯困，我这里特意准备了本文配套的两个视频，下面这个是腾讯视频的播放链接：

腾讯视频链接：Flutter轻松实现Adobe全家桶Logo列表功能

如果你喜欢去B站观看本文配套的视频讲解，请点击Bilibili链接：

B站链接： Flutter轻松实现Adobe全家桶Logo列表功能

按照国际惯例，先来一张效果图镇楼。

Flutter打造Adobe全家桶Logo

怎么样？是不是很牛逼！！！下面开始带领大家直接撸码：

本文配套源码，你可以在我的github下载：https://github.com/AweiLoveAndroid/Flutter-learning

---

首先创建列表

首先我们创建一个GridView，我们使用GridView.count，然后我们先用10个Container填充一下，也就说每一个item都是Container，里面是一个居中的Text，Container的代码如下：

 Container(
  decoration: BoxDecoration(
    color: Colors.grey,
    border: Border.all(color: Colors.blue, width: 5),
  ),
  child: Center(
    child: Text(
      'No.1',
      style: TextStyle(
        fontSize: 35.0,
        color: Colors.blue,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
),

看看效果：

上边缘和左右两侧没有边距，看起来不太直观，给每一个Container外边加一点边距，修改后的代码如下：

Padding(
    padding: EdgeInsets.all(15),
    child: Container(...)
)

效果如图所示：

这里面由于文字太多了，所以一行显示不下了，可以把文字大小调小一点就OK了（暂且不用管它），接下来我们看我们的Padding加上Container的代码接近200行了，特别难看，不方便使用和管理，下面对它做一个封装，具体操作请看后文描述。

---

封装列表内容

首先我们看，哪些是变化的，哪些是不变的，方便我们传参。 padding属性是一致的，不用管它。 BoxDecoration里面的color属性和 BoxDecoration的border属性里的color属性都是变化的，需要外部传入的。接下来就是Text的文字内容，以及color都是需要外部传入的。所以这四个属性需要封装一下。我这里封装了一个函数，我把Padding加上Container的那一段代码拿过来了，然后把里面要传参的4个参数提取出来，作为函数的参数，然后我们调用这个函数，传入这4个参数返回是一个widget类型，这个要记住。接下来看一下代码：

Widget buildItems(
      String text, Color textColor, Color borderColor, Color bgColor) {
    return Padding(
      padding: EdgeInsets.all(15),
      child: Container(
        decoration: BoxDecoration(
          color: bgColor,
          border: Border.all(color: borderColor, width: 5),
        ),
        child: Center(
          child: Text(
            text,
            style: TextStyle(
              fontSize: 35.0,
              color: textColor,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }

下面看看GridView代码对应的修改部分，代码如下所示：

GridView.count(
  crossAxisCount: 4,
  crossAxisSpacing: 5.0,
  mainAxisSpacing: 5.0,
  children: [
      buildItems('1', Colors.blue, Colors.blue, Colors.grey),
      buildItems('2', Colors.blue, Colors.blue, Colors.grey),
      buildItems('3', Colors.blue, Colors.blue, Colors.grey),
      buildItems('4', Colors.blue, Colors.blue, Colors.grey),
      buildItems('5', Colors.blue, Colors.blue, Colors.grey),
      buildItems('6', Colors.blue, Colors.blue, Colors.grey),
      buildItems('6', Colors.blue, Colors.blue, Colors.grey),
      buildItems('7', Colors.blue, Colors.blue, Colors.grey),
      buildItems('8', Colors.blue, Colors.blue, Colors.grey),
      buildItems('9', Colors.blue, Colors.blue, Colors.grey),
      buildItems('10', Colors.blue, Colors.blue, Colors.grey),
  ]
),

我们可以看到代码明显简洁了许多，看看使用效果图如何：

---

接下来填充具体的数据

部分代码如下所示：

GridView.count(
  crossAxisCount: 4,
  crossAxisSpacing: 5.0,
  mainAxisSpacing: 5.0,
  children: [
      buildItems('Ps',
        const Color(0XFF00C8FD),
        const Color(0XFF00C8FD),
        const Color(0XFF001C25)
      ),
      buildItems('Ai',
        const Color(0XFFFF7C00),
        const Color(0XFFFF7C00),
        const Color(0XFF271403)
      ),
      buildItems('Id',
        const Color(0XFFDA007A),
        const Color(0XFFDA007A),
        const Color(0XFF412E34)
      ),
      buildItems('Xd',
        const Color(0XFFFE2BC0),
        const Color(0XFFFE2BC0),
        const Color(0XFF2D001D)
      ),
      ...
  ]
),
...

截图如下所示：

自定义圆角弧度

我们发现有的有圆角，有的是没有圆角弧度的，所以这时候要对每一个Item进行个性化设置，圆角是在Container里面设置的，我么要对它进行操作，传入一个bool类型的值(也就是showRectRadis参数)进去判断即可，如果为true，那么就添加进去，如果为false，就保持默认的样式就好了，由于它是可选的参数，所以外面加一个大括号，同时这里面还用到“三目运算符”（不清楚 三目运算符 的可以看看我得博客Flutter基础篇（2）-- 老司机用一篇博客带你快速熟悉Dart语法）。下面看看代码是如何封装的：

  Widget buildItems(
      String text, Color textColor, Color borderColor, Color bgColor,
      {bool showRectRadis = false}) {
    return Padding(
      padding: EdgeInsets.all(15),
      child: Container(
        decoration: BoxDecoration(
          color: bgColor,
          border: Border.all(color: borderColor, width: 5),
          borderRadius: showRectRadis == true
              ? BorderRadius.circular(15)
              : BorderRadius.circular(0),
        ),
        child: Center(
          child: Text(
            text,
            style: TextStyle(
              fontSize: 35.0,
              color: textColor,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }

然后我们要把children里面的代码也相应的做一个调整，如果要显示圆角的，就加上showRectRadis: true这句，其他的保持不变，修改后的部分代码如下所示：

GridView.count(
  crossAxisCount: 4,
  crossAxisSpacing: 5.0,
  mainAxisSpacing: 5.0,
  children: [
      buildItems('Ps',
        const Color(0XFF00C8FD),
        const Color(0XFF00C8FD),
        const Color(0XFF001C25),
        showRectRadis: true
      ),
      buildItems('Ai',
        const Color(0XFFFF7C00),
        const Color(0XFFFF7C00),
        const Color(0XFF271403)
      ),
      buildItems('Id',
        const Color(0XFFDA007A),
        const Color(0XFFDA007A),
        const Color(0XFF412E34)
      ),
      buildItems('Xd',
        const Color(0XFFFE2BC0),
        const Color(0XFFFE2BC0),
        const Color(0XFF2D001D),
        showRectRadis: true
      ),
      ...
  ]
),
...

我们来看看最终的效果，如下图所示：

---

到此为止，Flutter轻松打造Adobe全家桶Logo的功能已经实现了，是不是很简单？作者辛苦了，麻烦点个赞吧，谢谢大家。

关于作者：公众号“Flutter那些事”，独家放送最新Flutter、Dart和Fuchsia等技术动态，以及众多原创，有技术深度的技术干货文章，还有Flutter实战干货文章，等你来看，喜欢Flutter和跨平台开发以及原生移动端开发的朋友们，赶紧来看看，欢迎大家关注。