用提供者改变颜色和图标

我有一个有状态的widget,其中包含一个容器,我已经描述了它的颜色,它有一个图标。我们如何改变容器的颜色和图标在它与供应商?

Container(
      child: Icon(Icons.trash,
        size: 27,
      ),
      color: Colors.green[500],
    ),

在这里,我有单选按钮,我想在容器的颜色名称的标题

RadioListTile(
title: Text('red'),
),
RadioListTile(
title: Text('green[500]'),
),
RadioListTile(
title: Text('blue'),
)

当用户点击这些磁贴时,我想让容器的颜色随着图标的变化而变化。

我的实际代码。

background: Container(
      padding: EdgeInsets.only(top: 5, right: 380, bottom: 5),
      child: Icon(LineIcons.trash_o,
        size: 27,
      ),
      color: Colors.green[400],
    ),

下面的代码是在不同的widget中,与上面的容器代码不同。

RadioButtonGroup(
            labels: <String>[
              'Delete',
              'Archive',
              'Mark as read/unread',
              'Move to',
              'None'
            ],
            orientation: GroupedButtonsOrientation.VERTICAL,
            itemBuilder: (radio, text, index){
              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  text, radio,
                ],
              );
              },
            onSelected: (selected){
              setState(() {
                rightSwipeSelected = selected;

              });
              },
            picked: rightSwipeSelected,
          ),

我需要为所有不同的radiobuttons设置不同的颜色。

解决方案:

在这里,你去确保安装供应商从 https:/pub.devpackagesprovider#-installing-tab-。

Github上的源代码 https:/github.comsantoshanandflutter-color-change-radio。

演示 https:/www.loom.comshare7edc6d5d2d6e45d9addb59ce3a63fc72

编码

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => ChangeColorModel()),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage(),
      ),
    );
  }
}

class ChangeColorModel with ChangeNotifier {
  RadioListValue _value = new RadioListValue(0, Colors.green[500], "Green");
  RadioListValue get currentValue => _value;

  void chageModel(RadioListValue m) {
    _value = m;
    notifyListeners();
  }
}

class RadioListValue {
  final int key;
  final Color color;
  final String label;
  RadioListValue(this.key, this.color, this.label);
}

class HomePage extends StatelessWidget {
  final _buttonOptions = [
    RadioListValue(0, Colors.green[100], "Green"),
    RadioListValue(1, Colors.red, "Red"),
    RadioListValue(2, Colors.pink, "Pink"),
    RadioListValue(3, Colors.black38, "Black"),
    RadioListValue(4, Colors.yellow, "Yellow"),
    RadioListValue(5, Colors.brown, "Brown"),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Consumer<ChangeColorModel>(builder: (context, model, _) {
        return Container(
          color: model.currentValue.color,
          child: ListView(
            padding: EdgeInsets.all(8.0),
            children: _buttonOptions
                .map(
                  (timeValue) => RadioListTile(
                    groupValue: model.currentValue.key,
                    title: Text(timeValue.label),
                    value: timeValue.key,
                    onChanged: (val) {
                      model.chageModel(_buttonOptions[val]);
                    },
                  ),
                )
                .toList(),
          ),
        );
      }),
    );
  }
}

给TA打赏
共{{data.count}}人
人已打赏
未分类

类型错误。无法读取未定义的'innerText'属性 - 从eshop中删除。

2022-9-9 2:56:19

未分类

指定Matplotlib网格上轴的最大范围。

2022-9-9 2:56:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索