且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Flutter ToggleButton类-Flutter 1.9.1

更新时间:2022-10-15 23:34:38

 导入'package:flutter / material.dart'; 

类SamplePage扩展了StatefulWidget {
@override
_SamplePageState createState()=> _SamplePageState();
}

类_SamplePageState扩展了State< SamplePage> {
List< bool> isSelected;

@override
void initState(){
isSelected = [true,false];
super.initState();
}

@override
小部件构建(BuildContext上下文){
return Scaffold(
appBar:AppBar(
title:Text(' ToggleButtons'),
),
正文:Center(
子级:Column(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
子级:< Widget> [
ToggleButtons(
borderColor:Colors.black,
fillColor:Colors.grey,
borderWidth:2,
selectedBorderColor:Colors.black,
selectedColor:Colors.white ,
borderRadius:BorderRadius.circular(0),
子项:< Widget> [
填充(
填充:const EdgeInsets.all(8.0),
子项:文字(
'Open 24 Hours',
样式:TextStyle(fontSize:16),
),
),
填充(
填充:const EdgeInsets.all(8.0),
子级:文本(
'Custom Hours',
style :TextStyle(fontSize:16),
),
),
],
onPressed:(int index){
setState((){
为(int i = 0;我< isSelected.length; i ++){
isSelected [i] = i == index
}
});
},
isSelected:isSelected,
),
],
),
),
);
}
}


I am currently learning Flutter and making good progress so please bear with me if this is a noob question.

Flutter recently updated to 1.9.1 and with that came the new widget ToggleButton Class;

It was just what I was after so I have implemented the widget in my code as follow

var isSelected1 = [false, true];
var isSelected2 = [false, true];

ToggleButtons(
                borderColor: Colors.black,
                fillColor: Colors.grey,
                borderWidth: 2,
                selectedBorderColor: Colors.black,
                selectedColor: Colors.white,
                borderRadius: BorderRadius.circular(0),
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      'Open 24 Hours',
                      style: TextStyle(fontSize: 16),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      'Custom Hours',
                      style: TextStyle(fontSize: 16),
                    ),
                  ),
                ],
                onPressed: (int index) {
                  setState(() {
                    for (int buttonIndex = 0;
                        buttonIndex < isSelected2.length;
                        buttonIndex++) {
                      if (buttonIndex == index) {
                        isSelected2[buttonIndex] = true;
                      } else {
                        isSelected2[buttonIndex] = false;
                      }
                    }
                  });
                },
                isSelected: isSelected2,
              ),`

What I am trying to do is display a widget when a button is selected.

I have tried numerous ways with the if, and, else statements and so far I cant figure it out.

for example

if (buttonIndex == index[0]) {
 // code here} 
else {
 //code here}

Where am I going wrong?

Thank you!

    import 'package:flutter/material.dart';

    class SamplePage extends StatefulWidget {
    @override
    _SamplePageState createState() => _SamplePageState();
    }

    class _SamplePageState extends State<SamplePage> {
    List<bool> isSelected;

    @override
    void initState() {
        isSelected = [true, false];
        super.initState();
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
        appBar: AppBar(
            title: Text('ToggleButtons'),
        ),
        body: Center(
            child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
                ToggleButtons(
                borderColor: Colors.black,
                fillColor: Colors.grey,
                borderWidth: 2,
                selectedBorderColor: Colors.black,
                selectedColor: Colors.white,
                borderRadius: BorderRadius.circular(0),
                children: <Widget>[
                    Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                        'Open 24 Hours',
                        style: TextStyle(fontSize: 16),
                    ),
                    ),
                    Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                        'Custom Hours',
                        style: TextStyle(fontSize: 16),
                    ),
                    ),
                ],
                onPressed: (int index) {
                    setState(() {
                    for (int i = 0; i < isSelected.length; i++) {
                        isSelected[i] = i == index
                    }
                    });
                },
                isSelected: isSelected,
                ),
            ],
            ),
        ),
        );
    }
    }