How to add Floating action Button in Bottom Navigation Bar in Center with border?

若如初见. 提交于 2020-02-20 04:54:22

问题


I am trying to add a Floating Action Button in the middle of the Bottom Navigation bar. Problem is border is not appearing and also margin in Floating Action Button and icons not according to my requirement.

Here is a picture of the issue. Achieved Image

Here is a picture what I want Required Image

Code

bottomNavigationBar: SafeArea(child: _buildBottomBar(context)),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: CircularGradientButton(
      tooltip: 'Increment',
      child: new Image.asset(UIData.cameraIcon),
      gradient: LinearGradient(colors: <Color>[
        Color.fromARGB(255, 17, 153, 142),
        Color.fromARGB(255, 56, 239, 125)
      ]),
      callback: () => openCamera(),
      //_optionsDialogBox(),
      elevation: 2.0,
    ), 



Widget _buildBottomBar(BuildContext context) {
return Material(
  color: Colors.white,
  child: TabBar(
    isScrollable: false,
    unselectedLabelColor: Colors.white.withOpacity(0.3),
    indicatorColor: Colors.white,
    tabs: <Tab>[
      new Tab(
        // set icon to the tab
        icon: Image.asset(
          _tabController.index == 0 ? UIData.mapIconActive : UIData.mapIcon,
          width: 30,
          height: 30,
        ),
      ),
      new Tab(
        icon: Image.asset(
          _tabController.index == 1
              ? UIData.listingIconActive
              : UIData.listingIcon,
          width: 30,
          height: 30,
        ),
      ),
      new Tab(
        icon: Image.asset(
          _tabController.index == 2
              ? UIData.messageIconActive
              : UIData.messageIcon,
          width: 30,
          height: 30,
        ),
      ),
      new Tab(
        icon: Image.asset(
          _tabController.index == 3
              ? UIData.settingsIconActive
              : UIData.settingsIcon,
          width: 30,
          height: 30,
        ),
      ),
    ],
    controller: _tabController,
  ),
);

}


回答1:


There are many possible solutions, one of them is to add padding and border.

import 'package:charts_flutter/flutter.dart' as prefix0;
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blueAccent,
        floatingActionButton: Padding(
          padding: EdgeInsets.only(top: 20),
          child: SizedBox(
            height: 70,
            width: 70,
            child: FloatingActionButton(
              backgroundColor: Colors.transparent,
              elevation: 0,
              onPressed: () {},
              child: Container(
                height: 70,
                width: 70,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white, width: 4),
                  shape: BoxShape.circle,
                  gradient: LinearGradient(
                    begin: const Alignment(0.7, -0.5),
                    end: const Alignment(0.6, 0.5),
                    colors: [
                      Color(0xFF53a78c),
                      Color(0xFF70d88b),
                    ],
                  ),
                ),
                child: Icon(Icons.photo_camera, size: 30),
              ),
            ),
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: BottomAppBar(
          color: Colors.white,
          child: Container(
            height: 80,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}


来源:https://stackoverflow.com/questions/57917876/how-to-add-floating-action-button-in-bottom-navigation-bar-in-center-with-border

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!