用于角标显示的组件。可容纳一个子组件,可选择方位添加角标及信息文字,可设置颜色。

用于显示一个角标

【message】 : 显示的文字信息 【String】
【location】 : 位置*4 【BannerLocation】
【color】: 角标颜色 【Color】
【child】: 孩子 【Widget】
【textStyle】: 文字样式 【TextStyle】
image.png

  1. import 'package:flutter/material.dart';
  2. class CustomBanner extends StatelessWidget {
  3. @override
  4. Widget build(BuildContext context) {
  5. var data = {
  6. BannerLocation.topStart: Colors.red,
  7. BannerLocation.topEnd: Colors.blue,
  8. BannerLocation.bottomStart: Colors.green,
  9. BannerLocation.bottomEnd: Colors.yellow,
  10. };
  11. return Wrap(
  12. spacing: 10,
  13. runSpacing: 10,
  14. children: data.keys.map((e) =>
  15. Container(
  16. color: Color(0xffD8F5FF),
  17. width: 150,
  18. height: 150 * 0.618,
  19. child: Banner(
  20. message: "Flutter 1.12发布",
  21. location: e,
  22. color: data[e],
  23. child: Padding(
  24. padding: EdgeInsets.all(20),
  25. child: FlutterLogo(colors: Colors.blue,
  26. style: FlutterLogoStyle.horizontal,)),
  27. ),
  28. )).toList());
  29. }
  30. }