Stack Overflow Asked by Mahmoud Harooney on February 25, 2021
I have the below BottomBarNavigation
as the image one:
So what I need just to make the back ground color to transparent and the extends to the body..
Here’s my code:
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class IPetHomeScreen extends StatefulWidget {
@override
_IPetHomeScreenState createState() => _IPetHomeScreenState();
}
class _IPetHomeScreenState extends State<IPetHomeScreen>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: 5, vsync: this);
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: TabBarView(
children: [
Container(
color: Colors.white,
),
Container(
color: Colors.green,
),
Container(
color: Colors.green,
),
Container(
color: Colors.green,
),
Container(
color: Colors.green,
),
],
controller: _tabController,
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(16.0),
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(50.0),
),
child: Container(
color: Colors.black54,
width: 0.0,
child: TabBar(
labelStyle: TextStyle(
fontSize: 10.0,
),
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
indicatorColor: Colors.black54,
tabs: [
Tab(
icon: Icon(
FontAwesomeIcons.paw,
size: 24.0,
),
),
Tab(
icon: Icon(
FontAwesomeIcons.filter,
size: 24.0,
),
),
Tab(
icon: Icon(
FontAwesomeIcons.heart,
size: 24.0,
),
),
Tab(
icon: Icon(
FontAwesomeIcons.shoppingBasket,
size: 24.0,
),
),
Tab(
icon: Icon(
FontAwesomeIcons.userAlt,
size: 24.0,
),
),
],
controller: _tabController,
),
),
),
),
);
}
}
Using bottomNavigationBar
implies that behaviour.
If you want to put the bar on top layer above the page, use Stack
instead:
Scaffold(
body: Stack(
children: [
TabBarView(
children: [
Container(color: Colors.red),
Container(color: Colors.green),
Container(color: Colors.blue),
],
controller: _tabController,
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(16),
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Container(
color: Colors.black54,
child: TabBar(
tabs: [
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.business)),
Tab(icon: Icon(Icons.school)),
],
controller: _tabController,
),
),
),
),
),
],
),
)
Correct answer by Pavel on February 25, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP