Flutter Tips of the Week - 002

Tip6 Ink 解决“水波纹” 超出的圆角边框

InkWell继承自InkResponse，可以非常简单的实现水波纹效果。 InkResponse可以实现自定义的各种水波纹效果，它不强制水波纹是矩形的形状。

InkWell(
  onTap: () {},
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
    decoration: BoxDecoration(
        border: Border.all(color: Colors.blue),
        borderRadius: BorderRadius.all(Radius.circular(30))),
    child: Text('这是InkWell点击效果'),
  ),
)

Ink隆重登场。让控件区域背景变成圆角矩形。Ink控件用于在Material控件上绘制图像或者其他装饰，以便InkWell、InkResponse控件的 “水波纹” 效果在其上面显示。

Ink(
  decoration: BoxDecoration(
      gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [Color(0xFFDE2F21), Color(0xFFEC592F)]),
      borderRadius: BorderRadius.all(Radius.circular(20))),
  child: InkWell(
    borderRadius: BorderRadius.all(Radius.circular(20)),
    child: Container(
      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
      child: Text(
        '这是InkWell的点击效果',
        style: TextStyle(color: Colors.white),
      ),
    ),
    onTap: () {},
  ),
)

Tip7 assert 条件为返回 false，中断程序执行且抛出错误信息

如何在你确定错误的条件的时候抛出相关错误信息，可以将错误信息赋值给 assert() 的第二个可选参数。

assert(title != null, "Title string cannot be null.");

Tip8 字符串乘法

您将字符串像数字一样使用乘法。

"Foo" * 2 //Foo
"Bar " * 5 //Bar Bar Bar Bar Bar

// ❌ 以前打印一个字符串多次
String oldWay(String value, int times) {
    String output;
    for(int i = 0; i < times; i++) {output += value;}
    return output;
}
  
// ✅ 使用字符串乘法
String newWay(String value, int times) => value * times;

Tip9 获取枚举值

enum Month { jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec }

如果我们需要获取 Month 元素对应的字符串。那么以前我们会这么写

print(Month.jan.toString().split('.').last) // jan

但当有了 Extension 后，我们可以更加简便可读的方式去获取。

extension MonthExtension on Object {
  String get enumValue => this.toString().split('.').last;
  
  int get value => this.index + 1;
  String get cn =>
  [
     "一",
     "二",
     "三",
     "四",
     "五",
     "六",
     "七",
     "八",
     "九",
     "十",
     "十一",
     "十二"
    ][this.index] + "月";
}

// ✅
print(Month.jan.enumValue); // jan
print(Month.jan.cn) // 一月

Tip10 CustomPainter 使用

在 Flutter 中，提供了一个 CustomPaint Widget，它可以结合一个画笔 CustomPainter 来实现绘制自定义图形。

1. 定义一个继承自 CustomPainter 的类
2. 重写 paint(canvas, size) 方法，在方法里面绘制各种形状
3. 将 CustomPainter 作为 CustomPaint Widget 的 paint 参数。

class SmileyPaint extends CustomPainter {
  const SmileyPaint(
      {this.mouthAngle = 0,
      this.leftEyesSize = 1,
      this.rightEyesSize = 1,
      this.showTongue = false,
      this.emojiColor = Colors.yellow,
      this.mouthHeight = 1.0});

  final double mouthAngle;

  final int leftEyesSize;

  final int rightEyesSize;

  final bool showTongue;
  final Color emojiColor;
  final double mouthHeight;

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = emojiColor;
    canvas.drawCircle(Offset(100, 100), size.height / 2, paint);
    paint.color = Colors.white;
    canvas.drawArc(
        Rect.fromCenter(
            center: Offset(100, (mouthAngle * 10) + 130), width: 100, height: 80 * mouthHeight),
        mouthAngle,
        3.14,
        true,
        paint);
    canvas.drawCircle(Offset(60, 70), leftEyesSize * 10.0, paint..color = Colors.black);
    canvas.drawCircle(Offset(140, 70), rightEyesSize * 10.0, paint..color = Colors.black);
    var tongueRect = Rect.fromPoints(Offset(75, 150), Offset(125, 220));
    var cRadius = Radius.circular(20);
    if (this.showTongue)
      canvas.drawRRect(
          RRect.fromRectAndCorners(tongueRect, bottomLeft: cRadius, bottomRight: cRadius),
          paint..color = Colors.pink);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class Smiley extends StatelessWidget {
  const Smiley(
      {this.mouthAngle = 0,
      this.leftEyesSize = 1,
      this.rightEyesSize = 1,
      this.showTongue = false,
      this.emojiColor = Colors.yellow,
      this.mouthHeight = 1.0});

  final double mouthAngle;

  final int leftEyesSize;

  final int rightEyesSize;

  final bool showTongue;
  final Color emojiColor;
  final double mouthHeight;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: CustomPaint(
          painter: SmileyPaint(
              mouthAngle: mouthAngle,
              leftEyesSize: leftEyesSize,
              rightEyesSize: rightEyesSize,
              showTongue: showTongue,
              emojiColor: emojiColor,
              mouthHeight: mouthHeight),
          size: Size.square(200),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        body: ListView(
          children: <Widget>[
            Smiley(
              mouthAngle: 3.14,
            ),
            Smiley(
              mouthAngle: 0.5,
              rightEyesSize: 3,
              showTongue: true,
            ),
            Smiley(
              leftEyesSize: 2,
            ),
            Smiley(
              leftEyesSize: 2,
              showTongue: true,
            ),
            Smiley(
              leftEyesSize: 2,
              rightEyesSize: 2,
              emojiColor: Colors.green,
              mouthHeight: 0.1,
            ),
            SizedBox(
              height: 200,
            )
          ],
        ),
      ),
    );
  }
}

更多文章阅读，请搜索微信公众号: 「OldBirds」