ToogleBar - Flutter

In This section, we are going to create a tooglebar in Flutter.

 

First create a Tooglebar statefull widget

 

                                      

class ToogleBar extends StatefulWidget{
  Color parentBgColor=Colors.black;
  Color toogleBgColor=Colors.grey;
  Color toogleSelectBgColor;
  Color textColor=Colors.white;
  Color textSelectColor;
  int height;
  double radious;
  final List  labels;
  ToogleBar(
      { @required this.labels,
        this.parentBgColor = Colors.black,
        this.toogleBgColor=Colors.grey,
        this.toogleSelectBgColor = Colors.deepPurple,
        this.textColor = Colors.white,
        this.textSelectColor = Colors.black,
        this.height = 48,
        this.radious = 20
        
  });

  @override
  State createState() {
    // TODO: implement createState
    return ToogleBarState();
  }

}

class ToogleBarState extends State{
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
   
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 48,
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: widget.parentBgColor,
      ),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
          itemBuilder: (c,intedex){
        return Container(
          margin: EdgeInsets.only(left: 8,right: 8),
          width: 100,
          decoration: BoxDecoration(
            color: widget.toogleBgColor,
            borderRadius: BorderRadius.circular(widget.radious)
          ),
          padding:EdgeInsets.all(8),child: Text(widget.labels[intedex],style: TextStyle(fontSize: 16,color: widget.textColor),textAlign: TextAlign.center,),
        );
      },
      itemCount: hm.length,)
    );
  }

}

 

 

main.dart file should be llike below

 

 

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  List lables=["Flutter","JAVA","ANDROID","IOS","ReactNative"];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home:Scaffold(
          appBar: AppBar(
            title: Text("ToogleBar"),
          ),
          body: Column(
        children: [
          ToogleBar(labels:lables),
          Text("Toogle Bar")
        ],
      ),
      )
    );
  }
}

 

 

Now let add the Events for each toogle item.

in Tooglebar.dart file
defins a HashMap with key as lables name and values as false by default.

 

 

hm=HashMap.fromIterable(widget.labels,value: (value)=>value=false);
hm[widget.labels.elementAt(0)]=true;

update ListView.Builder with below

 ListView.builder(
        scrollDirection: Axis.horizontal,
          itemBuilder: (c,intedex){
        return GestureDetector(
          onTap: (){
            updateSelection(intedex);
          },
          child: Container(
            margin: EdgeInsets.only(left: 8,right: 8),
            width: 100,
            decoration: BoxDecoration(
              color: hm[widget.labels.elementAt(intedex)]?widget.toogleSelectBgColor:widget.toogleBgColor,
              borderRadius: BorderRadius.circular(widget.radious)
            ),
            padding:EdgeInsets.all(8),child: Text(widget.labels[intedex],style: TextStyle(fontSize: 16,color: hm[widget.labels.elementAt(intedex)]?widget.textSelectColor:widget.textColor),textAlign: TextAlign.center,),
          ),
        );
      },
      itemCount: hm.length,)

 

 

Now create a method updateSelection(int index)  and handle the selected index and ints values.

 

updateSelection(int index)
      {
          hm.updateAll((label, value) =>value=false);
          hm[widget.labels.elementAt(index)]=true;
          widget.onSelectionUpdated(index);
      }

 

 

Here we are updating the hashmap values
  onSelectionUpdated() is the function which is handle tooglebar data from MyApp widget.

 

ToogleBar(labels:lables,
                  textSelectColor: Colors.white,
                  toogleSelectBgColor: Colors.deepPurple,
                  onSelectionUpdated: (index){
                    setState(() => currentIndex = index);
                  },),

 

 

Full code here
  

main.dart file 

 

import 'package:flutter/material.dart';
import 'package:tooglebar/tooglebar.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {


  @override
  State createState() {
    // TODO: implement createState
    return MyAppStat();
  }


}

class MyAppStat extends State{
  List lables=["Flutter","JAVA","ANDROID","IOS","ReactNative"];
  int currentIndex=0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Demo',
          theme: ThemeData(

            primarySwatch: Colors.blue,
          ),
          home:Scaffold(
            appBar: AppBar(
              title: Text("ToogleBar"),
            ),
            body: Column(
              children: [
                ToogleBar(labels:lables,
                  textSelectColor: Colors.white,
                  toogleSelectBgColor: Colors.deepPurple,
                  onSelectionUpdated: (index){
                    setState(() => currentIndex = index);
                  },),
                Text("Toogle Bar $currentIndex")
              ],
            ),
          )
      );
    }
  }




 


  toolbar.dart

 

import 'dart:collection';

import 'package:flutter/material.dart';

class ToogleBar extends StatefulWidget{
  Color parentBgColor=Colors.black;
  Color toogleBgColor=Colors.grey;
  Color toogleSelectBgColor;
  Color textColor=Colors.white;
  Color textSelectColor;
  int height;
  double radious;
  final List  labels;
  final Function(int) onSelectionUpdated;
  ToogleBar(
      { @required this.labels,
        this.parentBgColor = Colors.black,
        this.toogleBgColor=Colors.grey,
        this.toogleSelectBgColor = Colors.deepPurple,
        this.textColor = Colors.white,
        this.textSelectColor = Colors.black,
        this.height = 48,
        this.radious = 20,
        this.onSelectionUpdated

  });



  @override
  State createState() {
    // TODO: implement createState
    return ToogleBarState();
  }

}

class ToogleBarState extends State{
  HashMaphm;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    hm=HashMap.fromIterable(widget.labels,value: (value)=>value=false);
    hm[widget.labels.elementAt(0)]=true;
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 48,
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: widget.parentBgColor,
      ),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
          itemBuilder: (c,intedex){
        return GestureDetector(
          onTap: (){
            updateSelection(intedex);
          },
          child: Container(
            margin: EdgeInsets.only(left: 8,right: 8),
            width: 100,
            decoration: BoxDecoration(
              color: hm[widget.labels.elementAt(intedex)]?widget.toogleSelectBgColor:widget.toogleBgColor,
              borderRadius: BorderRadius.circular(widget.radious)
            ),
            padding:EdgeInsets.all(8),child: Text(widget.labels[intedex],style:
 TextStyle(fontSize: 16,color: hm[widget.labels.elementAt(intedex)]?widget.textSelectColor:widget.textColor),
textAlign: TextAlign.center,),
          ),
        );
      },
      itemCount: hm.length,)
    );
  }

  updateSelection(int index)
  {
      hm.updateAll((label, value) =>value=false);
      hm[widget.labels.elementAt(index)]=true;
      widget.onSelectionUpdated(index);
  }

}

 

 


Related Questions View All