How to fix appbar while navigating through pages in flutter? - flutter

Question

I want to navigate through screens but I need to change only the content of the body and the appbar stays as it is. I am having 4 files namely main.dart, screen1.dart, screen2.dart, and globals.dart. Screen1 is having a button to goto Screen2 and vice versa. When I clicked the button in screen1 it need to navigate to screen 2 and vice versa, but when I clicked the button nothing is happening. Here is my code:
main.dart
import 'package:demo/globals.dart';
import 'package:demo/screen2.dart';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
),
);
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
void initState() {
buildBody = Screen1();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepOrange,
title: Text('Fixed AppBar'),
centerTitle: true,
),
body: buildBody,
);
}
}
screen1.dart
import 'package:demo/screen2.dart';
import 'package:flutter/material.dart';
class Screen1 extends StatefulWidget {
#override
_Screen1State createState() => _Screen1State();
}
class _Screen1State extends State<Screen1> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Center(
child: FlatButton(
child: Text('Goto Screen 2', style: TextStyle(color: Colors.white)),
onPressed: () {
setState(() {
buildBody = Screen2();
});
},
),
),
);
}
}
screen2.dart
import 'package:demo/screen1.dart';
import 'package:flutter/material.dart';
class Screen2 extends StatefulWidget {
#override
_Screen2State createState() => _Screen2State();
}
class _Screen2State extends State<Screen2> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.brown,
child: Center(
child: FlatButton(
child: Text(
'Goto Screen 1',
style: TextStyle(color: Colors.white),
),
onPressed: () {
setState(() {
buildBody = Screen1();
});
},
),
),
);
}
}
globals.dart
import 'package:flutter/material.dart';
Widget buildBody;

Answer 1

Instead of using Scaffold in main file after MaterialApp
, use it in every separated screen use you custom content and the title you want.

Answer 2

Check out PageView https://api.flutter.dev/flutter/widgets/PageView-class.html
From flutter docs. I think that will work or use Tabs