how can i push button change right parts with url change flutter - flutter

Question

i make admin page.
I am making an admin page. I want to change only the red screen on the right side when the left button is pressed. However, the url must be changed as well.

Answer 1

import 'package:flutter/material.dart';
class SplashPage extends StatefulWidget {
const SplashPage({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() => _SplashPageState();
}
class _SplashPageState extends State<SplashPage>
with SingleTickerProviderStateMixin {
late TabController tabController;
#override
void initState() {
super.initState();
tabController = new TabController(length: 5, vsync: this);
tabController.addListener(() {
if (tabController.indexIsChanging) setState(() {});
});
}
#override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.white,
body: Container(child: _portraitWidget(height, width)),
);
}
Widget _portraitWidget(double height, double width) {
return Container(
height: height,
width: width,
child: Row(
children: [
Container(
height: MediaQuery.of(context).size.height,
width: 100,
color: Colors.white,
alignment: AlignmentDirectional.center,
// padding: const EdgeInsets.only(bottom: 10),
child: RotatedBox(
quarterTurns: 1,
child: TabBar(
controller: tabController,
indicatorColor: Colors.transparent,
indicatorPadding: EdgeInsets.all(0.0),
// labelPadding: EdgeInsets.only(
// left: AppDimens.space40, right: AppDimens.space40),
indicatorSize: TabBarIndicatorSize.label,
isScrollable: true,
tabs: <Widget>[
getItem(page: HomePagesEnum.PAGE_1, text: "PAGE_1"),
getItem(page: HomePagesEnum.PAGE_2, text: "PAGE_2"),
getItem(page: HomePagesEnum.PAGE_3, text: "PAGE_3"),
getItem(page: HomePagesEnum.PAGE_4, text: "PAGE_4"),
getItem(page: HomePagesEnum.PAGE_5, text: "PAGE_5"),
],
),
),
),
Expanded(
child: Container(
// padding: const EdgeInsetsDirectional.only(end: AppDimens.space32),
child: TabBarView(
controller: tabController,
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
_buildContent("Page 1", Colors.red),
_buildContent("Page 2", Colors.blue),
_buildContent("Page 3", Colors.blueAccent),
_buildContent("Page 4", Colors.amber),
_buildContent("Page 5", Colors.green),
],
),
),
),
],
),
);
}
Widget _buildContent(String title, Color color) {
return Container(
child: Text("$title"),
color: color,
);
}
Widget getItem({required String text, required HomePagesEnum page}) {
bool isSelected = (page.index == tabController.index);
return RotatedBox(
quarterTurns: -1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
text,
style: TextStyle(
color: isSelected ? Colors.black : Colors.grey,
fontWeight: FontWeight.bold,
fontSize: isSelected ? 18 : 15),
),
],
),
);
}
}
enum HomePagesEnum { PAGE_1, PAGE_2, PAGE_3, PAGE_4, PAGE_5 }