Closed itsdani121 closed 2 years ago
I also with the same problem here is my widget:
@override
Widget build(BuildContext context) {
final HomeScreenController controller = Get.put(HomeScreenController());
return Container(
color: CustomCollors.purpleColor,
child: SafeArea(
top: false,
child: ClipRect(
child: Obx(() => Scaffold(
extendBody: true,
bottomNavigationBar: CurvedNavigationBar(
backgroundColor: Colors.transparent,
index: controller.selectedTab.value,
color: CustomCollors.purpleColor,
animationDuration: const Duration(milliseconds: 300),
animationCurve: Curves.easeInOutQuad,
buttonBackgroundColor: CustomCollors.purpleColor,
items: const <Widget>[
Icon(
Icons.change_circle_rounded,
size: 30,
color: CustomCollors.whiteColor,
),
Icon(
Icons.home_rounded,
size: 30,
color: CustomCollors.whiteColor,
),
Icon(
Icons.account_circle,
size: 30,
color: CustomCollors.whiteColor,
),
],
onTap: (index) {
/// Code to push to some tab from outside onTap
/// final navigationState = _navigationTabKey.currentState!;
/// navigationState.setPage(index);
controller.changeSelectedTab(index);
},
),
body: screens[controller.selectedTab.value]
)),
),
),
);
}
extendBody
doesn't work.
@rafalbednarczuk plz look into this matter
@jsdaniell Please follow this code, it worked for me CurvedNavigationBar( backgroundColor: Colors.transparent, ),
For body of Curved Nav Bar SafeArea( bottom: false );
PS: Sorry for bad formatting
@Nishank00 i did but not work
@itsdani121
I was able to achieve this by removing safearea from bottom(false), I have two classes one for my bottom nav bar and one for the homepage both have extendbody true and Safearea bottom false
@Nishank00 ok i understand this thanks so basically in a class where nav bar attach set background color transparent and which classes added as list in their safeare set bottom false then it works..
``
@Nishank00 ok i understand this thanks so basically in a class where nav bar attach set background color transparent and which classes added as list in their safeare set bottom false then it works..
Yep
After hours of coding, sometime I may have code something that's made the background transparent, I don't know what's exactly I did, but here's my actual code:
import 'package:allugaapp/auth/auth.dart';
import 'package:allugaapp/constants/colors.dart';
import 'package:allugaapp/constants/tags_controllers.dart';
import 'package:allugaapp/screens/account_tab_screen/account_tab_screen.dart';
import 'package:allugaapp/screens/chat_tab_screen/chat_tab_screen.dart';
import 'package:allugaapp/screens/home_screen/home_screen_controller.dart';
import 'package:allugaapp/screens/main_tab_screen/main_tab_screen.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final screens = <Widget>[
const ChatTabScreen(),
const MainTabScreen(),
const AccountTabScreen(),
];
@override
Widget build(BuildContext context) {
return Container(
color: AllugaColors.purpleColor,
child: SafeArea(
top: false,
child: ClipRect(
child: GetBuilder<HomeScreenController>(
init: HomeScreenController(),
tag: TagsControllers.homeScreenController,
builder: (_) => Scaffold(
extendBody: true,
bottomNavigationBar: CurvedNavigationBar(
backgroundColor: _.selectedTab == 2
? AllugaColors.darkPurpleColor
: Colors.transparent,
index: _.selectedTab,
color: AllugaColors.purpleColor,
animationDuration: const Duration(milliseconds: 300),
animationCurve: Curves.easeInOutQuad,
buttonBackgroundColor: _.selectedTab == 2
? AllugaColors.whiteColor
: AllugaColors.purpleColor,
items: <Widget>[
const Icon(
Icons.all_inbox_rounded,
size: 30,
color: AllugaColors.whiteColor,
),
const Icon(
Icons.home_rounded,
size: 30,
color: AllugaColors.whiteColor,
),
Icon(
Icons.account_circle,
size: 30,
color: _.selectedTab == 2
? AllugaColors.purpleColor
: AllugaColors.whiteColor,
),
],
onTap: (index) {
_.changeSelectedTab(index);
},
),
body: screens[_.selectedTab]),
),
),
),
);
}
}
To make
@itsdani121
I was able to achieve this by removing safearea from bottom(false), I have two classes one for my bottom nav bar and one for the homepage both have extendbody true and Safearea bottom false
Thanks to this, I have a working solution.
See notes below on solution
Example working with ListView
:
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true, // required
bottomNavigationBar: CurvedNavigationBar(
height: 60,
backgroundColor: Colors.transparent, // required
buttonBackgroundColor: Colors.white,
items: [
IconButton(onPressed: () {}, icon: Icon(Icons.thumb_up)),
IconButton(onPressed: () {}, icon: Icon(Icons.thumb_up)),
IconButton(onPressed: () {}, icon: Icon(Icons.thumb_up)),
],
),
body: Container(
child: SafeArea( // if using this,
bottom: false, // then set this too
child: ListView.builder(
itemBuilder: (context, index) => ListTile(
tileColor: Colors.primaries[index % Colors.primaries.length],
title: Text("Item $index"),
),
itemCount: 50,
),
),
),
);
}
use the example in a MaterialApp
/CupertinoApp
or in a separate "screens" file
Based on Flutter: 2.8.1, Dart 2.15.1
Required:
Scaffold(extendBody: true, ...)
CurvedNavigationBar(backgroundColor: Colors.transparent,...)
Optionally:
SafeArea
, set SafeArea(bottom: false,...)
Hi, i tried all answers in #31 but did not work any answers that's why i am creating a new issue that the background of nav bar not changed here is my code:
kindly look into this and guide me if i am wrong this is my navbar class.