Изменить цвет и значок с провайдером

Question

У меня есть виджет с состоянием, который содержит контейнер, в котором я описал его цвет и значок. Как мы можем изменить цвет контейнера и значок в нем с провайдером?

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],
    ),

Код ниже находится в другом виджете, чем код контейнера выше.

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,
          ),

Мне нужны разные цвета для всех радиокнопок.

Answer 1

Вы можете управлять цветом контейнера, просто используя setState() и использовать две переменные для цвета и выбранной позиции флажка. В приведенном ниже коде я использовал строковые значения «1», «2» и «3» для * * * * * * * * * * * * * * * * * 100 *

* * * * * * * * * * * * * * * * * * * 100 * * * * * * * * * * * * * * * * 100 * * * * * * * * * * * * * * * * * * * 100: * * * 100 * * * *

Answer 2

Здесь вы go Обязательно установите провайдера из https://pub.dev/packages/provider# -install-tab-

Исходный код на Github https://github.com/santoshanand/flutter-color-change-radio

Демо https://www.loom.com/share/7edc6d5d2d6e45d9addb59ce3a63fc72

Код

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(),
          ),
        );
      }),
    );
  }
}