App bar is too big and the icons don't fit

Question

I am trying to resize the app bar but no change to make the width perfect for the icons to fit.

This is the code that I am using for it

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:tariffo/Detail.dart';
import 'package:tariffo/favoriteProviders.dart';
import 'package:tariffo/messages_list.dart';
import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';
import 'HomePage.dart';

class BarDetail extends StatefulWidget {
  @override
  _BarDetailState createState() => _BarDetailState();
}

class _BarDetailState extends State<BarDetail> {
  int currentIndex;
  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  changePage(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
        offset: Offset(0.0, -50),
        child: Container(
            height: 82,
            margin: EdgeInsets.only(left: 20, right: 20),
            child: ClipRRect(
                borderRadius: BorderRadius.all(
                  Radius.circular(40),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    BubbleBottomBar(
                        opacity: 0.2,
                        backgroundColor: Colors.white10,
                        borderRadius:
                            BorderRadius.vertical(top: Radius.circular(80.0)),
                        currentIndex: currentIndex,
                        hasInk: true,
                        inkColor: Colors.black12,
                        hasNotch: true,
                        onTap: (index) {
                          if (index == 1)
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => FavoriteProviders()),
                            );
                          if (index == 2)
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => Searchbar()),
                            );
                          if (index == 3)
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => MessageList()),
                            );
                        },
                        elevation: 100,
                        items: <BubbleBottomBarItem>[
                          BubbleBottomBarItem(
                            backgroundColor: Colors.blue,
                            icon: Icon(
                              Icons.dashboard,
                              color: Colors.black,
                              size: 20,
                            ),
                            activeIcon: Icon(Icons.dashboard,
                                color: Colors.blue, size: 20),
                            title: Text(
                              "Home",
                              textAlign: TextAlign.center,
                              style: TextStyle(fontSize: 15),
                            ),
                          ),
                          BubbleBottomBarItem(
                              backgroundColor: Colors.red,
                              icon: Icon(Icons.favorite_border,
                                  color: Colors.black, size: 20),
                              activeIcon: Icon(Icons.dashboard,
                                  color: Colors.red, size: 20),
                              title: Text("Saved")),
                          BubbleBottomBarItem(
                              backgroundColor: Colors.red,
                              icon: Icon(Icons.whatshot,
                                  color: Colors.black, size: 20),
                              activeIcon: Icon(Icons.dashboard,
                                  color: Colors.red, size: 20),
                              title: Text("Search")),
                          BubbleBottomBarItem(
                              backgroundColor: Colors.red,
                              icon: Icon(Icons.send,
                                  color: Colors.black, size: 20),
                              activeIcon: Icon(Icons.dashboard,
                                  color: Colors.red, size: 20),
                              title: Text("Messages")),
                        ]),
                  ],
                ))));
  }
}

Any idea what I should change? the height of the container ? the border radius? It's about the elevation? This app bar is only on my homepage. [1]: https://i.stack.imgur.com/ZDjNv.png

BabC · Answer 1 · 2021-01-04T18:12:47.937

I would say to remove the Column, the height of the container, and change the margin to all :

margin: EdgeInsets.all(20),

If you need to align some stuff :

How to align single widgets in Flutter?

EDIT :

Using the example from the package (bubble_bottom_bar) works pretty well :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Colors.red,
        bottomNavigationBar: BarDetail(),
      ),
    );
  }
}

class BarDetail extends StatefulWidget {
  @override
  _BarDetailState createState() => _BarDetailState();
}

class _BarDetailState extends State<BarDetail> {
  int currentIndex;

  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  changePage(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return BubbleBottomBar(
      // backgroundColor: Colors.red,
      opacity: 0.2,
      currentIndex: currentIndex,
      onTap: changePage,
      borderRadius: BorderRadius.vertical(top: Radius.circular(50)),
      elevation: 8,
      hasNotch: true,
      hasInk: true,
      inkColor: Colors.black12,
      items: <BubbleBottomBarItem>[
        BubbleBottomBarItem(
            backgroundColor: Colors.red,
            icon: Icon(
              Icons.dashboard,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.dashboard,
              color: Colors.red,
            ),
            title: Text("Home")),
        BubbleBottomBarItem(
            backgroundColor: Colors.deepPurple,
            icon: Icon(
              Icons.access_time,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.access_time,
              color: Colors.deepPurple,
            ),
            title: Text("Logs")),
        BubbleBottomBarItem(
            backgroundColor: Colors.indigo,
            icon: Icon(
              Icons.folder_open,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.folder_open,
              color: Colors.indigo,
            ),
            title: Text("Folders")),
        BubbleBottomBarItem(
            backgroundColor: Colors.green,
            icon: Icon(
              Icons.menu,
              color: Colors.black,
            ),
            activeIcon: Icon(
              Icons.menu,
              color: Colors.green,
            ),
            title: Text("Menu"))
      ],
    );
  }
}

App bar is too big and the icons don't fit

1 Answers1