What I want to do is switch between my pages by using BottomAppBar in my app but it doesn't work. what make it worse is that it doesn't show me any error so I don't know where is the problem. Thank you for your help :)
import 'package:flutter/material.dart';
import 'package:testing/SecondPage.dart';
void main() {
runApp(const MaterialApp(
title: 'MyApp',
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 5,
child: Scaffold(
body: Icon(Icons.rice_bowl,size:100,color: Colors.blue,),
floatingActionButton: FloatingActionButton(
hoverElevation: 50,
onPressed: () {},
child: const Icon(Icons.mic),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
//color: Colors.blue,
notchMargin: 10,
shape: const CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
onPressed: () {},
icon: const Icon(
Icons.contact_mail_outlined,
color: Colors.grey,
)),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.local_activity,
color: Colors.grey,
)),
Container(
height: 1,
),
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => secondPage()));
},
icon: const Icon(
Icons.safety_check,
color: Colors.grey,
)),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.read_more,
color: Colors.grey,
)),
],
),
)),
),
);
}
}
here is second page:
import 'package:flutter/material.dart';
class secondPage extends StatefulWidget {
const secondPage({Key? key}) : super(key: key);
@override
State<secondPage> createState() => _secondPageState();
}
class _secondPageState extends State<secondPage> {
@override
Widget build(BuildContext context) {
return Container(
child: Icon(Icons.rice_bowl,size: 200,),
);
}
}
I did everything I found in flutter docs but still doesn't work.
CodePudding user response:
I am able to navigate to a new page. However, I am not able to go back (pop) to the previous page.
Since you're pushing a completely new page, you should use a Scaffold()
with an AppBar
which will provide you with an option to go back to the previous screen.
You're secondPage
Widget should look like this:
class secondPage extends StatefulWidget {
const secondPage({Key? key}) : super(key: key);
@override
State<secondPage> createState() => _secondPageState();
}
class _secondPageState extends State<secondPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
child: Text("second page"),
),
);
}
}
CodePudding user response:
Use Scaffold()
Widget
Your Problem Will be Solved .