I want draw arc bottom navigation bar with flutter

My code

Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(30), topLeft: Radius.circular(30)),
          boxShadow: [
            BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
          ],
        ),
        child: ClipRRect(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
          ),
          child: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.transparent,
            selectedItemColor: Colors.purple,
            unselectedItemColor: Colors.grey,
            currentIndex: widget.selectedIndex,
            onTap: widget.onTap,
            items: widget.items,
          ),
        ))

Result

Expect (Is there any way to do the following?)

I want draw arc bottom navigation bar with flutter

My code

Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(30), topLeft: Radius.circular(30)),
          boxShadow: [
            BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
          ],
        ),
        child: ClipRRect(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(30.0),
            topRight: Radius.circular(30.0),
          ),
          child: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.transparent,
            selectedItemColor: Colors.purple,
            unselectedItemColor: Colors.grey,
            currentIndex: widget.selectedIndex,
            onTap: widget.onTap,
            items: widget.items,
          ),
        ))

Result

Expect (Is there any way to do the following?)

• flutter

• you can you custom paint to create this type of shape. or use shapemaker tools. – Munsif Ali Commented Mar 12 at 7:55

1 Answer 1

Here is some example code using a CustomPainter path along with a SizedBox larger than the NavigationBar.

import 'package:flutter/material.dart';

void main() => runApp(const NavigationBarApp());

class NavigationBarApp extends StatelessWidget {
  const NavigationBarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: const NavigationExample());
  }
}

class NavigationExample extends StatefulWidget {
  const NavigationExample({super.key});

  @override
  State<NavigationExample> createState() => _NavigationExampleState();
}

class _NavigationExampleState extends State<NavigationExample> {
  int _currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: CustomPaint(
        painter: RPSCustomPainter(),
        child: SizedBox(
          height: 130, // Adjust the height to change top point of the curve
          child: Column(
            mainAxisAlignment:
                MainAxisAlignment.end, // Align to bottom of SizedBox
            children: [
              NavigationBar(
                backgroundColor:
                    Colors.transparent, // Using the CustomPainter's color
                onDestinationSelected: (int index) {
                  setState(() {
                    _currentPageIndex = index;
                  });
                },
                selectedIndex: _currentPageIndex,
                destinations: const <Widget>[
                  NavigationDestination(icon: Icon(Icons.abc), label: '1'),
                  NavigationDestination(icon: Icon(Icons.abc), label: '2'),
                  NavigationDestination(icon: Icon(Icons.abc), label: '3'),
                ],
              ),
            ],
          ),
        ),
      ),
      body:
          <Widget>[
            Center(child: Text('1')),
            Center(child: Text('2')),
            Center(child: Text('3')),
          ][_currentPageIndex],
    );
  }
}

class RPSCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path();
    path.moveTo(0, size.height * 0.5);
    path.quadraticBezierTo(size.width * 0.5, 0, size.width, size.height * 0.5);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    Paint paint = Paint()..style = PaintingStyle.fill;
    paint.color = Colors.lightBlueAccent;
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}