BottomBar Text Icon and Selected Circle Indicator In Flutter

BottomBar Text Icon and Selected Circle Indicator In Flutter :

BottomBar Text Icon and Selected Circle Indicator In Flutter

BottomBar Text Icon and Selected Circle Indicator :

import 'package:flutter/material.dart';

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

class FoodOrderingApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Food App',
      theme: ThemeData(
        accentColor: Color(0xff127A73),
        primaryColor: Colors.white,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List<Widget> _pages = [Container(color: Color(0xffB9D7D5)), Container(color: Color(0xffB9D7D5)), Container(color: Color(0xffB9D7D5)), Container(color: Color(0xffB9D7D5))];

  List<IconData> _bottomBarIcons = [Icons.home, Icons.favorite_border, Icons.calendar_today, Icons.person_outline,];
  List<String> _bottomBarLabels = ["Menu", "Liked", "Orders", "Profile"];

  int _currentBottomTabSelected = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            _buildAppBar(),
            Expanded(child: _pages[_currentBottomTabSelected]),
            _buildBottomBar(),
          ],
        ),
      ),
    );
  }


  Widget _buildAppBar() {
    return Padding(
      padding: const EdgeInsets.all(15.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(child: Text("Flutter Tutorial", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600))),
        ],
      ),
    );
  }

  Widget _buildBottomBar() {
    return Container(
      color: Color(0xffB9D7D5),
      child: ClipRRect(
        borderRadius: BorderRadius.only(topLeft: Radius.circular(26), topRight: Radius.circular(26,),),
        child: Container(
          color: Colors.white,
          child: Row(
            children: _bottomBarIcons.map((icon) {
              int position = _bottomBarIcons.indexOf(icon);
              return Expanded(child:
                Padding(
                  padding: const EdgeInsets.all(16),
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        _currentBottomTabSelected = position;
                      });
                    },
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        _currentBottomTabSelected == position ? _getCircle() : Icon(_bottomBarIcons[position]),
                        Visibility(
                          visible: position == _currentBottomTabSelected,
                          child: Text(_bottomBarLabels[position],
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(color: Theme.of(context).accentColor, fontSize: 12,),),
                        )
                      ],
                    ),
                  ),
                )
              );
            }).toList(),
          ),
        ),
      ),
    );
  }

  Widget _getCircle() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
      child: CircleAvatar(
        backgroundColor: Theme.of(context).accentColor,
        radius: 4,
      ),
    );
  }
}



The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in