Flutter ToggleButtons Example

Flutter ToggleButtons Example

In this  Flutter tutorial, we learn how to use  a ToggleButtons . Like if you want some button on you screen and when you click on button the highlight your selected button with different color.

Following is a simple for quick code snippet on how to use ToggleButtons widget. Following code you can used   in your State class. and easy to make a Toggle button for your Android , and iOS App.

Example – Flutter ToggleButtons Widget

In this flutter example, we will use ToggleButtons widget with three icon widgets and make it to handle toggle of button click.

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(4, (_) => false);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Center(child: Text('Flutter Tutorial - Codeplayom.com')),
          ),
          body: ListView(children: <Widget>[
            Container(
                alignment: Alignment.center,
                margin: EdgeInsets.all(10),
                padding: EdgeInsets.all(20),
                child: ToggleButtons(
                  children: <Widget>[
                    Icon(Icons.home_filled),
                    Icon(Icons.home_repair_service),
                    Icon(Icons.add_location),
                    Icon(Icons.payment),
                  ],
                  isSelected: _selections,
                  onPressed: (int index) {
                    setState(() {
                      _selections[index] = !_selections[index];
                    });
                  },
                ))
          ]),
        ));
  }
}

Run your Application and see UI Happy Coding  Learn More Flutter Tutorial