flutter-tutorial

Flutter Toggle Buttons

To create a ToggleButtons, just call the constructor. There are two required arguments: children (List<Widget>) and isSelected (List<bool>). Each widget in children represents a button and it’s typically an Icon or a Text. isSelected is a List of bool containing the state of each button whether it’s selected (if the value is true) or not (if the value is false). The length of children and isSelected must be the same.

Example

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<bool> _selections = List.generate(3, (_) => false);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Center(child: Text('Learn Code Zone')),
      ),
      body: ListView(children: <Widget>[
        Container(
            alignment: Alignment.center,
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(20),
            child: ToggleButtons(
              children: <Widget>[
                Icon(Icons.add_comment),
                Icon(Icons.airline_seat_individual_suite),
                Icon(Icons.add_location),
              ],
              isSelected: _selections,
              onPressed: (int index) {
                setState(() {
                  _selections[index] = !_selections[index];
                });
              },
            ))
      ]),
    ));
  }
}


RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.