如何在带有边框的底部导航栏中添加浮动动作按钮？ [英] How to add Floating action Button in Bottom Navigation Bar in Center with border?

问题描述

我正在尝试在底部导航栏的中间添加一个浮动操作按钮。问题是没有出现边框，而且浮动操作按钮和图标的边距也不符合我的要求。

这里是问题的图片。

  import'package：charts_flutter / flutter.dart'为prefix0; 
导入的 package：flutter / material.dart； 
 
 void main（）=> runApp（MyApp（））; 
 
类MyApp扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return MaterialApp（
 title：'Flutter Demo'，
主题：ThemeData（
 primarySwatch：Colors.blue，
），
主页：Scaffold（
 backgroundColor：Colors.blueAccent，
 floatActionButton：Padding（
 padding：EdgeInsets.only（top：20），
 child：SizedBox（
 height：70，
 width：70，
 child：FloatingActionButton（
 backgroundColor ：Colors.transparent，
高程：0，
 onPressed ：(）{}，
子级：容器（
高度：70，
宽度：70，
装饰：BoxDecoration（
边界：Border.all（颜色：Colors.white，宽度：4），
形状：BoxShape.circle，
梯度：LinearGr adient（
开始：const Alignment（0.7，-0.5），
结束：const Alignment（0.6，0.5），
颜色：[
 Color（0xFF53a78c），
颜色（0xFF70d88b），
]，
），
），
子级：Icon（Icons.photo_camera，大小：30），
），
），
），
），
 floatActionButtonLocation：FloatingActionButtonLocation.centerDocked，
 bottomNavigationBar：BottomAppBar（
 color：Colors.white，
子级：Container （
高：80，
颜色：Colors.white，
），
），
），
）; 
} 
} 
  

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,
  ),
);

}

解决方案

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,
          ),
        ),
      ),
    );
  }
}

这篇关于如何在带有边框的底部导航栏中添加浮动动作按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！