Inscription – sword tianya, start from your drip accumulation, and will keep improving.

Flutter is Google’s latest mobile development framework.

There is a set of Material ICONS built into Flutter. To use this set of ICONS, you can call the following code using the Icon component:

buildDefaultIcon() {
  return Icon(
      /// Icon data
      Icons.phone,
      /// Icon size
      size: 18,); }Copy the code

It is also possible to use an Apple-style set of ICONS by adding the Cupertino_icons dependency:

dependencies:
  cupertino_icons: ^0.13.
Copy the code

To use ICONS to load apple-style ICONS, just use CupertinoIcons to reference them. The code is as follows:

buildDefaultIcon() {
   return Icon(
       /// Icon data
       CupertinoIcons.phone_solid,
       /// Icon size
       size: 18,); }Copy the code

Operation effect comparison:Of course, the default effect has certain use scenarios, after the author processing as follows:The idea is to wrap the Icon in a Container Container, and then set a Gradient color background to the Container Container, such as the linear Gradient background set here. Small editor has written this set as a RoundCornerIcon, directly call to achieve the above icon style, the code is as follows:

 RoundCornerIcon buildRoundCornerIcon(a) {
   return RoundCornerIcon(
     /// The phone icon
     iconData: CupertinoIcons.phone_solid,
     /// linear gradient background
     gradient: LinearGradient(
       /// color transition
       colors: [
         Colors.redAccent,
         Colors.orange,
       ],
       /// The color transition begins in the upper-left corner
       begin: Alignment.topLeft,
       /// The end of the color transition is in the lower right corner
       end: Alignment.bottomRight,
     ),
   );
 }

Copy the code

The RoundCornerIcon is a StatelessWidget, which is implemented as follows:

import 'package:flutter/material.dart';



class RoundCornerIcon extends StatelessWidget {

  final IconData iconData;
  final Gradient gradient;

  const RoundCornerIcon({
    Key key,
    @required this.gradient,
    @required this.iconData,
  })  : assert(iconData ! =null).assert(gradient ! =null).super(key: key);


  @override
  Widget build(BuildContext context) {
    /// round cut
    return ClipRRect(
      /// Four rounded angles
      borderRadius: BorderRadius.circular(5),
      /// The clipped child Widget
      child:Container(
        /// gradient style background decoration
        decoration: BoxDecoration(
          gradient: gradient
        ),
        /// the rounded background size
        height: 23,
        width: 23./// small icon in the middle
        child: Icon(
          /// Icon data
          iconData,
          /// Icon size
          size: 18.// the color of the iconcolor: Colors.white, ), ), ); }}Copy the code

The completion of

Of course to xiaobian character, to achieve millions of Demo copy and paste at any time to use, here is a must have the source code: all the code in this article here

[X1] The daily reminder of wechat official account is accumulated at any time

【 X2 】 Various series of free open source video tutorials focus on you won’t get lost

【 X3 】 series article millions of Demo copy and paste use at any time