CODEWITHSUNDEEP
flutterdart
Syed Mahfuzur Rahman
Syed Mahfuzur Rahman

Reputation: 467

How to make rectangle notch curve in bottomnavigationbar flutter

I want to make a BottomNavigationBar like below image:

Rectangular curved

But when i implement the code, i get a result like below:

enter image description here

My code:

bottomNavigationBar: BottomAppBar(
          //elevation: 0.2,
          notchMargin: 7,
          clipBehavior: Clip.antiAlias,
          color: Color(0xff1c1f26),
          shape: AutomaticNotchedShape(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15),
                      topRight: Radius.circular(15))),
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)))),
          child: SizedBox(
            width: double.infinity,
            height: 60,
          )),
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(17))),
        onPressed: () {},
        child: Icon(Icons.favorite),
      )

what i need to do change or add to get a similar result like first image?

Upvotes: 1

Views: 4130

Answers (1)

sidrao2006
sidrao2006

Reputation: 1328

Code Sample:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(),
        bottomNavigationBar: const BottomAppBar(
          notchMargin: 7,
          color: Color(0xff1c1f26),
          shape: AutomaticNotchedShape(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(
                top: Radius.circular(15),
              ),
            ),
            RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
          ),
          child: SizedBox(
            width: double.infinity,
            height: 60,
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(17))),
          onPressed: () {},
          child: const Icon(Icons.favorite),
        ),
      ),
    );
  }
}

Output:

Output image

Flutter 2.5.3 Dart SDK 2.14.4

Upvotes: 4

Related Questions