Make selectable buttons in Flutter

666 views Asked by At

I want make selectable buttons(I know how to do it but), i cant do like in example like this. The first button(all) doesnt need to have icon. And the last two button need to be on new line. When i try all buttons get icon, and i dont know to to make the last 2 button be on NEW LINE Can you explain to me how to do it. Thank you

List<IconData> icon = [Icons.photo, Icons.video_call, Icons.video_library, Icons.add_circle];
List<bool> isSelected = List.generate(4, (index) => false);
List<String> innerText = ['All', 'Photo', 'Video', 'Reel', 'Story']; (this in main file)
```

```
import 'package:flutter/material.dart';
import '../my_const.dart';

class MyToggleButtons extends StatelessWidget{
  final List<String> text;
  final List<IconData> iconData;
  final List<bool> isSelected;
  final Function setStateFunction;
  const MyToggleButtons({Key? key, required this.text, required this.iconData, required this.isSelected, required this.setStateFunction,})
      : super(key: key);


  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: ToggleButtons(
        isSelected: isSelected,
        splashColor: Colors.green,
        fillColor: Colors.transparent,
        onPressed: (int index){
          setStateFunction((){
            isSelected[index] = !isSelected[index];
          });
        },
        renderBorder: false,
        children:
        List<Widget>.generate(iconData.length, (index){
          return CustomButton(
            text: text[index],
            iconData: iconData[index],
            isSelected: isSelected[index],
          );
        }),
      ),
    );
  }
}

class CustomButton extends StatelessWidget {
  final String text;
  final IconData iconData;
  final bool isSelected;
  const CustomButton({Key? key, required this.text, required this.iconData, this.isSelected = false, }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
        Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          const SizedBox(
            width: 10,
          ),
          SizedBox.fromSize(
            size: const Size(102, 52),
            child: Container(
              decoration: BoxDecoration(
                color: isSelected ? kBlue : superWhite,
                borderRadius: BorderRadius.circular(10),
                border: Border.all(
                    width: 3.0,
                    color: kBlue
                ),
              ),
              child: InkWell(
                onTap: (){},
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: const [
                    Icon(iconData,
           color: isSelected ? Colors.white : Colors.blue,),
                    Text('Video', style: TextStyle(fontSize: 14, color: kBlue, fontWeight: FontWeight.w600),)
                  ],
                ),
              ),
            ),
          ),
        ]
    ),
    ]
    );
  }
}
```
```
`
0

There are 0 answers