Flutter easily implements Adobe Whole family bucket Logo list

Copyright notice: This article was first published on the public account Flutter. It is strictly prohibited to republish without permission.

Adobe products we should be very familiar with, we look at its product Logo, a look can remember several, such as: PS, Ai, Pr, Dw and so on. Most logos are uniform, either square or circular, with two letters in the middle, the first uppercase and the second lowercase. I have to admire the creative talent of the Adobe Logo design team. Today, I will introduce to you the design of The Adobe Logo using Flutter and display them on the same screen, all with code, without any external tools. Take a look at these interesting logos for once. It is not easy for the author to write an article. If you think it looks good, please click a “like” to support it. Thank you.

This article is well illustrated and I hope you can read it carefully. In order to avoid sleepiness, I have specially prepared two videos for this article. The following is the playing link of Tencent Video:

Flutter easily implements Adobe’s whole family bucket Logo list function

If you’d like to go to Bilibili for the accompanying video explanation, please click on the Bilibili link:

B site link: Flutter easily implements Adobe bucket Logo list functionality

In accordance with international practice, first a sketch town building.

How’s that？ Isn’t it awesome!! The following begins to lead you directly to the code:

The accompanying source code for this article can be downloaded on github:Github.com/AweiLoveAnd…

---

First create the list

We create a GridView using gridView. count, and fill it with 10 containers. Each item is a Container and contains a central Text.

 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: color.blue, fontWeight: fontweight.bold,),),),Copy the code

Look at the results:

There is no margin on the top edge and left and right sides, which is not very intuitive. Add a margin on the outside of each Container. The modified code is as follows:

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

The effect is as follows:

There because there are too many words, so I can’t row shows, can put the text resize a little bit small with respect to OK no need to worry about (for it), then we look at our Padding and Container close to the 200 lines of code, especially ugly, is not convenient to use and manage, do in the face of it an encapsulation, specific operation after see article description.

---

Encapsulating list contents

First of all, let’s see what’s changed and what’s not changed, so that we can send in the parameters. The padding property is the same. Don’t worry about it. The color attribute in the BoxDecoration and the color attribute in the border attribute of the BoxDecoration are changed and need to be passed in from outside. Next is the Text content of Text, and color is external. So these four attributes need to be encapsulated. So I’m encapsulating a function here, so I’m taking the Padding and the Container, and I’m extracting the four parameters that I’m passing in as parameters to the function, and then I’m calling this function, and I’m passing those four parameters and it returns a widget type, so remember that. Let’s look at the code:

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,),),); }Copy the code

Let’s take a look at the corresponding changes to the GridView code, which looks like this:

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),
  ]
),
Copy the code

We can see that the code is much cleaner. Let’s see how it looks using the renderings:

---

Next, fill in the concrete data

Part of the code looks like this:

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) ), ... ] ),...Copy the code

The screenshot is as follows:

Custom fillet radian

We find that some items have rounded corners and some have no rounded corners, so we need to personalize each Item. Rounded corners are set in containers. We need to operate on it by passing in a bool (showRectRadis). So I’m going to put it in, if it’s false, I’m going to keep the default, and since it’s optional, I’m going to put a curly bracket around it, There is also the use of the “trisomes operator” (if you don’t know the trisomes operator, check out my blog, the foundation of Flutter (2) – the old driver uses a blog to quickly familiarize you with the Dart syntax). Here’s how the code is wrapped:

  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,),),),); }Copy the code

Then we need to adjust the code in children accordingly. If we want to display rounded corners, we will add showRectRadis: true, and other things will remain unchanged. Part of the modified code is as follows:

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),... ] ),...Copy the code

Let’s take a look at the final result, as shown below:

---

By now, the ability of Flutter to easily create Adobe’s whole family bucket Logo has been achieved. Isn’t that easy? Thank you for your hard work. Please give me a thumbs up. Thank you.

About the author: The public account “Flutter Things” features the latest Flutter, Dart and Fuchsia technology developments, as well as many original and in-depth technical articles on Flutter and its practical application. For those who love Flutter and cross-platform development, as well as native mobile development, Check it out and welcome your attention.