如何将半径边界设置为导航栏颤振

Question

我想在导航栏的左上角和右上角添加圆形边框。下面我提到了我的底部导航条码。我怎样才能做到这一点？感谢您对此的帮助。 ..................................................... ......................................

import 'package:deltamax_health/Screens/welcome_screen.dart';
import 'package:flutter/material.dart';

import '../Constant/colors.dart';
import 'dashboard.dart';


class BottomNavigation extends StatefulWidget {
  const BottomNavigation({ Key? key }) : super(key: key);

  @override
  State<BottomNavigation> createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
int _selectedindex = 0;

  void _navigatePages(int index) {
    setState(() {
      _selectedindex = index;
    });
  }

final List<Widget> _Pages = [const Dashboard() ,const WelcomeScreen()];

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      body: _Pages[_selectedindex],
       bottomNavigationBar: BottomNavigationBar(

         backgroundColor: Color.fromRGBO(115, 131, 163, 0.7490196078431373),

         fixedColor: backgroundBlue,
            currentIndex: _selectedindex,
            onTap: _navigatePages,
            type: BottomNavigationBarType.fixed,
            items: const [
              BottomNavigationBarItem(icon:Icon(
              Icons.account_balance_wallet_outlined,
              color: textblue,
              size: 30,
            ), label: ""),
              BottomNavigationBarItem(icon: Icon(
              Icons.open_in_browser_outlined,
              color: textblue,
              size: 30,
            ), label: ""),
              BottomNavigationBarItem(icon: Icon(
              Icons.money_outlined,
              color: textblue,
              size: 30,
            ), label: "")
            ]),

    );
  }
}

Answer 1

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      bottomNavigationBar: DefaultTabController(
        length: 4,
        initialIndex: 0,
        child: Container(
          margin: const EdgeInsets.only(bottom: .5),
          padding: const EdgeInsets.only(top: 3),
          height: 50,
          decoration: BoxDecoration(
            // color: Theme.of(context).backgroundColor,
            color: Colors.white,
            border: Border.all(
              color: Colors.grey[700]!,
              width: 0.5,
            ),
            borderRadius: const BorderRadius.only(
              topRight: Radius.circular(17),
              topLeft: Radius.circular(17),
            ),
          ),
          child: TabBar(
            physics: const NeverScrollableScrollPhysics(),
            isScrollable: false,

            controller: _tabController,
            indicatorWeight: 0,
            // mouseCursor: MouseCursor.defer,
            indicator: const UnderlineTabIndicator(
              borderSide: BorderSide(
                color: Colors.black,
                width: 1,
              ),
              // insets: EdgeInsets.symmetric(horizontal: 0),
            ),
            tabs: [
              kTabBarItemConstructor(
                Icons.home,
                'Home',
              ),
              Container(
                child: kTabBarItemConstructor(
                  Icons.home,
                  'Home',
                ),
              ),
              Container(
                child: kTabBarItemConstructor(
                  Icons.home,
                  'Profile',
                ),
              ),
              // Tab(
              //   child: Container(
              //     child: Column(
              //       mainAxisAlignment: MainAxisAlignment.center,
              //       children: [
              //
              //         Text(
              //           'Корзина',
              //           style: TextStyle(
              //             fontSize: 9,
              //             color: Colors.grey[600],
              //           ),
              //         ),
              //       ],
              //     ),
              //   ),
              // ),
              kTabBarItemConstructor(
                Icons.home,
                'Profile',
              ),
            ],
          ),
        ),
      ),
    ));
  }
}
Widget kTabBarItemConstructor(IconData icon, String text) {
  return Tab(
    child: Container(
      height: 40,
      width: 70,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            icon,
            color: Colors.black.withOpacity(.65),
            size: 25,
          ),
          Container(
            // margin: EdgeInsets.symmetric(horizontal: 10),
            child: Text(
              text,
              style: TextStyle(
                fontSize: 9,
                color: Colors.grey[600],
              ),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    ),
  );
}

Run on DartPad.

Answer 2

用 Container 环绕并提供 borderRadius seen 可以解决问题，但在角落会有飞溅效果。在此可以使用 clipBehavior on Container.

bottomNavigationBar: Container(
clipBehavior: Clip.hardEdge, //or better look(and cost) using Clip.antiAlias,
decoration: BoxDecoration(
  borderRadius: BorderRadius.only(
    topRight: Radius.circular(24),
    topLeft: Radius.circular(24),
  ),
),
child: BottomNavigationBar(

或者直接使用ClipRRect

body: _Pages[_selectedindex],
bottomNavigationBar: ClipRRect(
  borderRadius: const BorderRadius.only(
    topRight: Radius.circular(24),
    topLeft: Radius.circular(24),
  ),
  child: BottomNavigationBar(

更新 1

使用 extendBody: true 将 body 扩展到脚手架的底部。或者您可以为简单的案例提供 backgroundColor。

return Scaffold(
  // backgroundColor: Colors.blue, //same as body color
  extendBody: true,
  body: _Pages[_selectedindex],
  bottomNavigationBar:

如何将半径边界设置为导航栏颤振

how to border radius to navigation bar flutter

flutter

flutter-layout