Flyter color gradient and follow button imitating Taobao gradient

One 、 Linear color gradient

Implement a container , Most use Container Widget, Frame border adopt  decoration  Attribute control , and  BoxDecoration  In addition to supporting border Outside the control of , And support  gradient  The control of .

  const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  })

In general, it is used Linear gradient ,Fultter Pass through  LinearGradient  To support the implementation of linear gradient

//  Linear gradient 
Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      // Alignment(x,y)  (0,0)  By  rectangle  Calculated from the center point 
      begin: Alignment(0.0, -1.0),
      end: Alignment(0.0, 1.0),
      colors: <Color>[
        Color(0xFFFF5000),
        Color(0xFFFF9000),
        Colors.black,
      ],
    ),
  ),
),

LinearGradient  The definition is as follows ：

  const LinearGradient({
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    @required List<Color> colors,
    List<double> stops,
    this.tileMode = TileMode.clamp,
  })

colors  Multiple colors can be passed in , Used to implement gradient

The default value is  Aligment.centerLeft  and  Aligment.centerRight

About Aligment Default properties and (x,y) The relation of coordinates is as follows ：

  /// The top left corner.
  static const Alignment topLeft = Alignment(-1.0, -1.0);

  /// The center point along the top edge.
  static const Alignment topCenter = Alignment(0.0, -1.0);

  /// The top right corner.
  static const Alignment topRight = Alignment(1.0, -1.0);

  /// The center point along the left edge.
  static const Alignment centerLeft = Alignment(-1.0, 0.0);

  /// The center point, both horizontally and vertically.
  static const Alignment center = Alignment(0.0, 0.0);

  /// The center point along the right edge.
  static const Alignment centerRight = Alignment(1.0, 0.0);

  /// The bottom left corner.
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);

  /// The center point along the bottom edge.
  static const Alignment bottomCenter = Alignment(0.0, 1.0);

  /// The bottom right corner.
  static const Alignment bottomRight = Alignment(1.0, 1.0);

Flutter in View（ The typical performance is Container Widget） Center point （0,0） In fact, it is the real central position , Instead of the usual understanding  topLeft  This point

So the effect of the above gradient is as follows ：

Two 、 Horizontal linear gradient

The above implementation is a vertical linear gradient , If you want to use a horizontal linear gradient , It's really just the start and begin Change your point ：

Container(
  width: 200,
  height: 50,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment(-1, 0),
      end: Alignment(1.0, 0),
      colors: <Color>[
        const Color(0xFFFF5000),
        const Color(0xFFFF9000),
      ],
    ),
  ),
),

Alignment(-1, 0)  Means left middle ,Alignment(1.0, 0)  It means right middle

effect ：

3、 ... and 、 Simulate the follow button of mobile Taobao

 

The core of this follow button is radius And horizontal linear color gradient

from iconfont Find a wechat follow icon （ Off-white , You can't see it here ）：

  The awkward thing is that the icon is white , I can't see it posted here . Make a background color as follows ：

Color gradient analysis comes down to ：const Color(0xFFFF5000), const Color(0xFFFF9000)

besides , Click follow , Become a concerned copywriter , And the state can be changed many times

Realization ：

class FollowWidget extends StatefulWidget {
  FollowWidget({Key key}) : super(key: key);

  _FollowWidgetState createState() => _FollowWidgetState();
}

class _FollowWidgetState extends State<FollowWidget> {
  bool _followStatus = false;

  void _followClickHandle() {
    setState(() {
      this._followStatus = !this._followStatus;
    });
  }

  List<Color> _getGradient() {
    if (this._followStatus) {
      return <Color>[Colors.grey, Colors.grey];
    } else {
      return <Color>[const Color(0xFFFF5000), const Color(0xFFFF9000)];
    }
  }

  List<Widget> _getContent() {
    List<Widget> defaultContent = <Widget>[
      Text(
        this._followStatus ? ' Followed ' : ' Focus on ',
        style: TextStyle(
          fontSize: 16,
          color: Colors.white,
          letterSpacing: 1.2,
        ),
      )
    ];
    List<Widget> prefixContent = <Widget>[
      Image.network(
        'https://gw.alicdn.com/tfs/TB1OC0TXMMPMeJjy1XcXXXpppXa-108-84.png',
        height: 16,
      ),
      SizedBox(width: 3)
    ];
    if (!this._followStatus) {
      defaultContent.insertAll(0, prefixContent);
    }
    return defaultContent;
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        width: 90,
        height: 40,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          gradient: LinearGradient(
            begin: Alignment(-1, 0),
            end: Alignment(1.0, 0),
            colors: this._getGradient(),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: this._getContent(),
        ),
      ),
      onTap: this._followClickHandle,
    );
  }
}

effect ：

Four 、 Complete code

FlutterHelloWorld/main.45- Color gradient -follow Components .dart at dev1 · postbird/FlutterHelloWorld · GitHub

FlutterHelloWorld/main.45-2- Gradient follow button .dart at dev1 · postbird/FlutterHelloWorld · GitHub

If it doesn't open github, Just look at the source code here .

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(' The gradient '),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          //  Radial Gradient 
          Container(
            width: 200,
            height: 100,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                // Alignment(x,y)  (0,0)  By  rectangle  Calculated from the center point 
                begin: Alignment(0.0, -1.0),
                end: Alignment(0.0, 1.0),
                colors: <Color>[
                  Color(0xFFFF5000),
                  Color(0xFFFF9000),
                  Colors.black,
                ],
              ),
            ),
          ),
          SizedBox(height: 10),
          //  Horizontal gradient 
          Container(
            width: 200,
            height: 50,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment(-1, 0),
                end: Alignment(1.0, 0),
                colors: <Color>[
                  const Color(0xFFFF5000),
                  const Color(0xFFFF9000),
                ],
              ),
            ),
          ),
          SizedBox(height: 10),
          FollowWidget(),
        ],
      ),
    );
  }
}

class FollowWidget extends StatefulWidget {
  FollowWidget({Key key}) : super(key: key);

  _FollowWidgetState createState() => _FollowWidgetState();
}

class _FollowWidgetState extends State<FollowWidget> {
  bool _followStatus = false;

  void _followClickHandle() {
    setState(() {
      this._followStatus = !this._followStatus;
    });
  }

  List<Color> _getGradient() {
    if (this._followStatus) {
      return <Color>[Colors.grey, Colors.grey];
    } else {
      return <Color>[const Color(0xFFFF5000), const Color(0xFFFF9000)];
    }
  }

  List<Widget> _getContent() {
    List<Widget> defaultContent = <Widget>[
      Text(
        this._followStatus ? ' Followed ' : ' Focus on ',
        style: TextStyle(
          fontSize: 16,
          color: Colors.white,
          letterSpacing: 1.2,
        ),
      )
    ];
    List<Widget> prefixContent = <Widget>[
      Image.network(
        'https://gw.alicdn.com/tfs/TB1OC0TXMMPMeJjy1XcXXXpppXa-108-84.png',
        height: 16,
      ),
      SizedBox(width: 3)
    ];
    if (!this._followStatus) {
      defaultContent.insertAll(0, prefixContent);
    }
    return defaultContent;
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        width: 90,
        height: 40,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          gradient: LinearGradient(
            begin: Alignment(-1, 0),
            end: Alignment(1.0, 0),
            colors: this._getGradient(),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: this._getContent(),
        ),
      ),
      onTap: this._followClickHandle,
    );
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedContainer Follow'),
        ),
        body: FollowWidget(),
      ),
    );
  }
}

class FollowWidget extends StatefulWidget {
  FollowWidget({Key key}) : super(key: key);

  _FollowWidgetState createState() => _FollowWidgetState();
}

class _FollowWidgetState extends State<FollowWidget> {
  bool _followStatus = false;

  void _followClickHandle() {
    setState(() {
      this._followStatus = !this._followStatus;
    });
  }

  List<Color> _getGradient() {
    if (this._followStatus) {
      return <Color>[Colors.grey, Colors.grey];
    } else {
      return <Color>[const Color(0xFFFF5000), const Color(0xFFFF9000)];
    }
  }

  List<Widget> _getContent() {
    List<Widget> defaultContent = <Widget>[
      Text(
        this._followStatus ? ' Followed ' : ' Focus on ',
        style: TextStyle(
          fontSize: 16,
          color: Colors.white,
          letterSpacing: 1.2,
        ),
      )
    ];
    List<Widget> prefixContent = <Widget>[
      Image.network(
        'https://gw.alicdn.com/tfs/TB1OC0TXMMPMeJjy1XcXXXpppXa-108-84.png',
        height: 16,
      ),
      SizedBox(width: 3)
    ];
    if (!this._followStatus) {
      defaultContent.insertAll(0, prefixContent);
    }
    return defaultContent;
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: AnimatedContainer(
        width: 90,
        height: 40,
        duration: Duration(milliseconds: 500),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          gradient: LinearGradient(
            begin: Alignment(-1, 0),
            end: Alignment(1.0, 0),
            colors: this._getGradient(),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: this._getContent(),
        ),
      ),
      onTap: this._followClickHandle,
    );
  }
}