TabBarView小部件可能会有很大帮助
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.brown),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
late TabController tabController;
@override
void initState() {
super.initState();
tabController = TabController(
initialIndex: 0,
length: 4,
vsync: this,
);
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
TabBarView(
controller: tabController,
children: [
Container(
color: Colors.red,
child: const Center(child: Text("Page 1"))),
Container(
color: Colors.purple,
child: const Center(child: Text("Page 2"))),
Container(
color: Colors.yellow,
child: const Center(child: Text("Page 3"))),
Container(
color: Colors.orange,
child: const Center(child: Text("Page 4"))),
],
),
Positioned(
bottom: 0,
right: 0,
left: 0,
child: Padding(
padding: const EdgeInsets.all(28.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50)),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20.0, vertical: 20),
child: TabBar(
controller: tabController,
indicatorColor: Colors.transparent,
unselectedLabelColor: Colors.grey[110],
dividerColor: Colors.transparent,
tabs: const [
Icon(Icons.home),
Icon(Icons.heart_broken),
Icon(Icons.search),
Icon(Icons.account_circle_outlined),
],
),
),
),
),
),
],
),
);
}
}