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

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

腾讯视频链接

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

B站链接

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

Flutter打造Adobe全家桶Logo

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

首先创建列表

首先我们创建一个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
      ),
      ...
  ]
),
...

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