CODEWITHSUNDEEP
flutterflutter-layout
Disha Gajera
Disha Gajera

Reputation: 218

How to set middle half Image to bottom navigation bar?

How to set an image to the middle of the bottom navigation bar which looks it attached with bottom view.

Desired Image

Upvotes: 2

Views: 1073

Answers (1)

chunhunghan
chunhunghan

Reputation: 54365

You can copy paste run full code below
You can use 

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
...
bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),

For detail you can reference https://proandroiddev.com/flutter-how-to-using-bottomappbar-75d53426f5af

working demo

enter image description here

code snippet

full code 

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

class BottomAppBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: const Text('Bottom App Bar')),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 4.0,
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            )
          ],
        ),
      ),
    );
  }
}

Upvotes: 3

Related Questions