具有提供程序的Flutter Animated Builder,可显示URL中的图像

时间:2020-11-11 04:25:45

标签: flutter flutter-provider

我想显示URL中的SVG图像,并且我正在使用flutter_svg包来显示图像。我使用Provider提供了图片网址,并且希望每位用户向下或向上滚动图片时更改图片的颜色(图片显示在应用栏上)。

以下是我的代码段

HomeAppbar.dart

class HomeAppBar extends StatefulWidget{
  AnimationController controller;

  HomeAppBar({@required this.controller});

  @override
  _HomeAppBarState createState() => _HomeAppBarState();
}

class _HomeAppBarState extends State<HomeAppBar> {

  Animation appBarColorTween, iconColorTween, logoColorTween;

  @override
  void initState() {
    appBarColorTween = ColorTween(begin: Colors.transparent, end: Colors.white)
        .animate(widget.controller);
    logoColorTween = ColorTween(begin: Colors.white, end: KaskuColor.primary)
        .animate(widget.controller);
    iconColorTween = ColorTween(begin: Colors.white, end: Color(0xFFCACCCF))
        .animate(widget.controller);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: (BuildContext context, Widget child) {
        return Container(
          padding: EdgeInsets.only(top: 24, left: 21, right: 21),
          width: double.infinity,
          height: 80,
          color: appBarColorTween.value,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Consumer(
                builder: (BuildContext context, GeneralConfigProvider provider, Widget child) {
                  print('Print this');
                  return SvgPicture.network(
                    provider.logoDefault,
                    height: 21,
                    color: logoColorTween.value,
                  );
                }
              ),

              IconButton(
                icon: IconBadge(
                  icon: Icon(
                    Icons.shopping_cart,
                    color: iconColorTween.value,
                  ),
                  count: 0,
                ), onPressed: () {},
              )
            ],
          ),
        );
      },
      animation: widget.controller,
    );
  }
}

GeneralConfigProvider.dart

class GeneralConfigProvider with ChangeNotifier{

  Color _primaryColor;
  Color _accentColor;
  String _logoDefault = "image url";

  init(){
    _getColor();
  }

  _getColor()async{

    String stringColor = '#be504f';
    String stringColor2 = '#65bbe6';

    _primaryColor = hexToColor(stringColor);
    _accentColor = hexToColor(stringColor2);
    notifyListeners();
  }

  Color get primaryColor => _primaryColor ?? Color(0xFFFF00FF);
  Color get accentColor => _accentColor ?? Color(0xFFFF00FF);

  String get logoDefault => _logoDefault;
}

问题是每次用户向下或向上滚动"print this"部分时总是打印太多。这个可以吗?还是我的代码有问题?还是有更好的方法?

谢谢!

0 个答案:

没有答案