Scribd
Upload
99 views2 pages

Curved Navigation Bar in Flutter App

This document contains code for a Flutter mobile app layout with a bottom navigation bar. It imports necessary packages and defines a MobileScreenLayout class with a StatefulWidget that creates a Scaffold with a CurvedNavigationBar at the bottom. The navigation bar has 5 items and changes the main body page when an item is tapped. It also includes a button to programmatically change the active page.

Uploaded by

Nasson Kambala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
99 views2 pages

Curved Navigation Bar in Flutter App

This document contains code for a Flutter mobile app layout with a bottom navigation bar. It imports necessary packages and defines a MobileScreenLayout class with a StatefulWidget that creates a Scaffold with a CurvedNavigationBar at the bottom. The navigation bar has 5 items and changes the main body page when an item is tapped. It also includes a button to programmatically change the active page.

Uploaded by

Nasson Kambala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import 'dart:html';

import 'package:escola/utils/colors.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:firebase_auth/firebase_auth.dart';

void main() => runApp(MaterialApp(home: MobileScreenLayout()));

class MobileScreenLayout extends StatefulWidget {


const MobileScreenLayout({super.key});

@override
_MobileScreenLayoutState createState() => _MobileScreenLayoutState();
}
final FirebaseAuth _auth = FirebaseAuth.instance;

class _MobileScreenLayoutState extends State<MobileScreenLayout> {


int _page = 0;

GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: 0,
height: 60.0,
items: <Widget>[
Icon(Icons.home, size: 30),
Icon(Icons.school, size: 30),
Icon(Icons.add, size: 30),
Icon(Icons.message_outlined, size: 30),
Icon(Icons.person, size: 30),
],
color: Colors.white,
buttonBackgroundColor: Colors.white,
backgroundColor: Colors.blueAccent,
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 600),
onTap: (index) {
setState(() {
_page = index;
});
},
letIndexChange: (index) => true,
),
body: Container(
color: Colors.blueAccent,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_page.toString(), textScaleFactor: 10.0),
ElevatedButton(
child: Text('Go To Page of index 1'),
onPressed: () {
final CurvedNavigationBarState? navBarState =
_bottomNavigationKey.currentState;
navBarState?.setPage(1);
},
)
],
),
),
));
}
}

You might also like