Flattern : Custom Radio-Button

Wie kann ich ein custom radio-button-Gruppe, wie dies in flattern Flattern : Custom Radio-Button

InformationsquelleAutor Shyju Madathil | 2018-04-27

Hier ist der vollständige code

class CustomRadio extends StatefulWidget {
  @override
  createState() {
    return new CustomRadioState();
  }
}

class CustomRadioState extends State<CustomRadio> {
  List<RadioModel> sampleData = new List<RadioModel>();

  @override
  void initState() {
    //TODO: implement initState
    super.initState();
    sampleData.add(new RadioModel(false, 'A', 'April 18'));
    sampleData.add(new RadioModel(false, 'B', 'April 17'));
    sampleData.add(new RadioModel(false, 'C', 'April 16'));
    sampleData.add(new RadioModel(false, 'D', 'April 15'));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("ListItem"),
      ),
      body: new ListView.builder(
        itemCount: sampleData.length,
        itemBuilder: (BuildContext context, int index) {
          return new InkWell(
            //highlightColor: Colors.red,
            splashColor: Colors.blueAccent,
            onTap: () {
              setState(() {
                sampleData.forEach((element) => element.isSelected = false);
                sampleData[index].isSelected = true;
              });
            },
            child: new RadioItem(sampleData[index]),
          );
        },
      ),
    );
  }
}

class RadioItem extends StatelessWidget {
  final RadioModel _item;
  RadioItem(this._item);
  @override
  Widget build(BuildContext context) {
    return new Container(
      margin: new EdgeInsets.all(15.0),
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          new Container(
            height: 50.0,
            width: 50.0,
            child: new Center(
              child: new Text(_item.buttonText,
                  style: new TextStyle(
                      color:
                          _item.isSelected ? Colors.white : Colors.black,
                      //fontWeight: FontWeight.bold,
                      fontSize: 18.0)),
            ),
            decoration: new BoxDecoration(
              color: _item.isSelected
                  ? Colors.blueAccent
                  : Colors.transparent,
              border: new Border.all(
                  width: 1.0,
                  color: _item.isSelected
                      ? Colors.blueAccent
                      : Colors.grey),
              borderRadius: const BorderRadius.all(const Radius.circular(2.0)),
            ),
          ),
          new Container(
            margin: new EdgeInsets.only(left: 10.0),
            child: new Text(_item.text),
          )
        ],
      ),
    );
  }
}

class RadioModel {
  bool isSelected;
  final String buttonText;
  final String text;

  RadioModel(this.isSelected, this.buttonText, this.text);
}

Verwenden :

void main() {
  runApp(new MaterialApp(
    home: new CustomRadio(),
  ));
}

Screenshot :
Flattern : Custom Radio-Button

diese Lösung ist ein life saver

InformationsquelleAutor Shyju Madathil

Können Sie erstellen es mit ListView und List-Element mit einer lokalen variable zum speichern des ausgewählten Elements. Und Sie machen kann das ausgewählte ListItem basierend auf der variable.

P. S. Lassen Sie mich wissen, wenn Sie benötigen code-snippet.

[BEARBEITEN]

Als Sie beantragt haben, Hier ist der code, snipper, die Ihnen zeigen, wie Sie können, behalten Sie den Zustand der einzelnen ListView-Element.

Jetzt können Sie spielen mit ihm und machen es wie Sie wollen. Wollen Sie nur ein ausgewähltes Element können Sie die Logik, die Art und Weise.

void main() {
  runApp(new MaterialApp(
    home: new ListItemDemo(),
  ));
}

class ListItemDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("ListItem"),
      ),
      body: new ListView.builder(
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return new MyListItem(
              title: "Hello ${index + 1}",
            );
          }),
    );
  }
}

class MyListItem extends StatefulWidget {
  final String title;

  MyListItem({this.title});

  @override
  _MyListItemState createState() => new _MyListItemState();
}

class _MyListItemState extends State<MyListItem> {
  bool isSelected;

  @override
  void initState() {
    super.initState();
    isSelected = false;
  }

  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        new Text("${widget.title} ${isSelected ? "true" : "false"}"),
        new RaisedButton(
          onPressed: () {
            if (isSelected) {
              setState(() {
                isSelected = false;
              });
            } else {
              setState(() {
                isSelected = true;
              });
            }
          },
          child: new Text("Select"),
        )
      ],
    );
  }
}

Danke für die Antwort, es würde dankbar sein, wenn Sie teilen können, ein Beispiel für das gleiche. Es können mehrere Elemente in einem einzigen Bildschirm. Wie 10 multiple-choice-Fragen in einer übergeordneten listview
Ich haver aktualisiert die Antwort, bitte entschuldigen Sie die Verzögerung.
Vielen Dank für die Hilfe. Ich werde den code ändern, wie es funktioniert wie checkbox nun statt der radio-Gruppe.

InformationsquelleAutor dhuma1981

Ich erreicht, dass mit der folgenden Logik.
Antworten Sie, wenn Sie brauchen eine ausführliche Erklärung

import 'package:flutter/material.dart';

class Parent extends StatefulWidget {
  Parent({
    Key key,
  }) : super(key: key);

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

class _ParentState extends State<Parent> {
  int _selectedItem = 0;

  selectItem(index) {
    setState(() {
      _selectedItem = index;
      print(selectItem.toString());
    });
  }

  @override
  Widget build(BuildContext context) {
    //...YOUR WIDGET TREE HERE

    return ListView.builder(
      shrinkWrap: true,
      itemCount: 5,
      itemBuilder: (context, index) {
        return CustomItem(
          selectItem, //callback function, setstate for parent
          index: index,
          isSelected: _selectedItem == index ? true : false,
          title: index.toString(),
        );
      },
    );
  }
}

class CustomItem extends StatefulWidget {
  final String title;
  final int index;
  final bool isSelected;
  Function(int) selectItem;

  CustomItem(
    this.selectItem, {
    Key key,
    this.title,
    this.index,
    this.isSelected,
  }) : super(key: key);

  _CustomItemState createState() => _CustomItemState();
}

class _CustomItemState extends State<CustomItem> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Text("${widget.isSelected ? "true" : "false"}"),
        RaisedButton(
          onPressed: () {
            widget.selectItem(widget.index);
          },
          child: Text("${widget.title}"),
        )
      ],
    );
  }
}

InformationsquelleAutor Mario D. Quiroz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.