I need to remove or change color of that gradient bottom line and remove margin of bottom nav bar. There is no any problem with displaying layout in android. How to fix it? Here is my code:
Widget _buildContent(BuildContext context) {
return WillPopScope(
onWillPop: () async {
bool handle = !await widget._screenStates[_pressedPosition].currentState
.maybePop();
if (handle) {
return await _showExitDialog(context);
} else {
return handle;
}
},
child: SafeArea(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
PageView(
physics: new NeverScrollableScrollPhysics(),
controller: _pageController,
children: _mainScreens(),
),
Align(
alignment: Alignment.bottomCenter,
child: CurvedNavigationBar(
animationDuration: Duration(milliseconds: 200),
backgroundColor: Colors.transparent,
onTap: (int position) {
_bottomTapped(position);
},
height: BottomAppBarHeight,
items: <Widget>[
ImageIcon(
AssetImage('assets/images/logo_small.png'),
color: PrimaryColor,
size: 40.0,
),
Icon(
Icons.list,
size: 25.0,
color: (_pressedPosition == 1)
? PrimaryColor
: DarkerGreyColor,
),
Icon(
Icons.shopping_cart,
size: 25.0,
color: (_pressedPosition == 2)
? PrimaryColor
: DarkerGreyColor,
),
Icon(
Icons.favorite,
size: 25.0,
color: (_pressedPosition == 3)
? PrimaryColor
: DarkerGreyColor,
),
Icon(
Icons.account_circle,
size: 25.0,
color: (_pressedPosition == 4)
? PrimaryColor
: DarkerGreyColor,
),
],
),
)
],
),
),
);
}
Thanks for your help! In addition, here is image with bottom gradient line:
I think that problem is in the safe area.
try fit:StackFit.loose,or
SafeArea(
bottom: false,
child: myWidgetThatFillsTheScreen,
)
Related
Using persistent_bottom_nav_bar: ^5.0.2, how do I detect that the user is scrolling on a list views of items on connection_view.dart page from bottom_nav_bar.dart page? So if it detects, I want the bottom_nav_bar to be hidden when user scrolls down.
bottom_nav_bar.dart, my bottom navigation bar
Widget build(BuildContext context) {
return Sizer(builder: ((context, orientation, deviceType) {
return Scaffold(
body: PersistentTabView(context,
screens: const [
ClientConnection(),
ClientDiscover(),
ClientDiscover(),
ClientDiscover()
],
items: _navBarsItems(),
navBarStyle: NavBarStyle.style1,
bottomScreenMargin: 0,
navBarHeight: 60,
padding: const NavBarPadding.all(5),
margin: const EdgeInsets.only(
bottom: 15,
left: 20,
right: 20,
),
decoration: NavBarDecoration(
borderRadius: BorderRadius.circular(30),
boxShadow: const [
BoxShadow(
color: Colors.grey,
blurRadius: 5,
offset: Offset(2, 2))
])),
List<PersistentBottomNavBarItem> _navBarsItems() {
return [
PersistentBottomNavBarItem(
icon: SvgPicture.asset(
'assets/active-connection-icon.svg',
width: 5.w,
),
title: ("CONNECTIONS"),
inactiveIcon: SvgPicture.asset(
'assets/inactive-connection-icon.svg',
width: 5.w,
),
),
PersistentBottomNavBarItem(
icon: SvgPicture.asset(
'assets/active-discover-icon.svg',
width: 5.w,
),
title: ("DISCOVER"),
inactiveIcon: SvgPicture.asset(
'assets/inactive-discover-icon.svg',
width: 5.w,
),
),
PersistentBottomNavBarItem(
icon: SvgPicture.asset(
'assets/active-profile-icon.svg',
width: 5.w,
),
title: ("PROFILE"),
inactiveIcon: SvgPicture.asset(
'assets/inactive-profile-icon.svg',
width: 5.w,
),
),
PersistentBottomNavBarItem(
icon: SvgPicture.asset(
'assets/active-notification-icon.svg',
width: 5.w,
),
title: ("NOTIFICATIONS"),
inactiveIcon: SvgPicture.asset(
'assets/inactive-notification-icon.svg',
width: 5.w,
),
),
connection_view.dart,my list view of items
Widget build(BuildContext context) {
return Sizer(builder: ((context, orientation, deviceType) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
toolbarHeight: 10.h,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Connections',
style: TextStyle(color: Colors.black),
),
SizedBox(
width: 2.w,
),
Container(
width: 10.w,
height: 6.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.blue,
),
),
],
),
),
body: ListView.builder(
controller: _scrollController,
physics: ClampingScrollPhysics(),
itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
itemCount: 20,
),
);
}));
You need two things: listen to scrolling events and update the visibility of your app bar accordingly.
To do that you will need a StatefulWidget which contains the app bar as well, create two members in the state class to track scrolling direction and app bar visibility:
bool _showAppBar = true;
bool _isScrollingDown = false;
Wrap the app bar into a Visibility widget depending on the _showAppBar member:
...
Visibility(visible: _showAppBar, child: YourBottomNavBarWidgetHere()),
...
Register the listener to detect scrolling direction and update the visibility. I suggest using initState and dispose methods:
#override
void initState() {
super.initState();
_scrollController.addListener(_scrollListener);
}
#override
void dispose() {
_scrollController.removeListener(_scrollListener);
super.dispose();
}
scrollListener() {
if (_scrollController.position.userScrollDirection ==
ScrollDirection.reverse && !_isScrollingDown) {
_isScrollingDown = true;
setState(() {
_showAppBar = false;
});
}
else if (_scrollController.position.userScrollDirection ==
ScrollDirection.forward && _isScrollingDown) {
_isScrollingDown = false;
setState(() {
_showAppBar = true;
});
}
}
Alternatively, you can use an AnimatedContainer instead of Visibility. This way the app bar will be hidden and shown animated:
AnimatedContainer(
height: _showAppBar ? kToolbarHeight : 0.0,
duration: const Duration(milliseconds: 300),
child: YourBottomNavBarWidgetHere()),
I am trying to build a layout where 2 of my widgets are aligned to the bottom of the page and remain there when the window is resized. So far I use the following code and it works in keeping the footer at the bottom of the page:
return Scaffold(
appBar: AppBarDesktop(),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: constraints.copyWith(
minHeight: constraints.maxHeight, maxHeight: double.infinity),
child: IntrinsicHeight(
child: Column(
children: [
Container(
//height: 400,
child: Center(
child: Text(
"COMING SOON!",
style: Theme.of(context).textTheme.titleLarge,
),
),
),
newsletterWidget(),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: footerWidget(),
),
),
],
)),
),
);
},
),
);
My issues it that I Want to also have the newsletter anchored to the bottom to resize with the footer. I have tried placing a column within the Expanded Widget however that just breaks the functionality for both, I also tried putting the newsletter widget within the footerwidget however the issue is the same. Is there a way for me to have 2 Expanded widgets? or an alternative way to have 2 rows within one Expanded
Edit:
This is my footer widget:
class footerWidget extends StatelessWidget {
const footerWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 40,
child: Center(
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Icon(
IconData(0xe198, fontFamily: 'MaterialIcons'),
size: 20,
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"MyGameDevPal 2022. All rights reserved.",
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodySmall,
),
),
),
Spacer(),
OnHoverButton(builder: (isHovered) {
return IconButton(
color: isHovered ? HexColor('#2476c4') : Colors.white,
icon: new Icon(FontAwesomeIcons.facebook),
onPressed: () {
_launchUrlFacebook();
},
);
}),
OnHoverButton(builder: (isHovered) {
return IconButton(
color: isHovered ? HexColor('#2476c4') : Colors.white,
icon: new Icon(FontAwesomeIcons.instagram),
onPressed: () {
_launchUrlInstagram();
},
);
}),
OnHoverButton(builder: (isHovered) {
return IconButton(
color: isHovered ? HexColor('#2476c4') : Colors.white,
icon: new Icon(FontAwesomeIcons.twitter),
onPressed: () {
_launchUrlTwitter();
},
);
}),
OnHoverButton(builder: (isHovered) {
return IconButton(
color: isHovered ? HexColor('#2476c4') : Colors.white,
icon: new Icon(FontAwesomeIcons.youtube),
onPressed: () {
_launchUrlYoutube();
},
);
}),
OnHoverButton(builder: (isHovered) {
return Padding(
padding: const EdgeInsets.only(right: 15),
child: IconButton(
color: isHovered ? HexColor('#2476c4') : Colors.white,
icon: new Icon(FontAwesomeIcons.discord),
onPressed: () {
_launchUrlDiscord();
},
),
);
}),
],
),
));
}
}
you can use Flixible instead of expanded tr it
This is my first time asking a question here. I'm a newbie in flutter and trying to create this popup menu (Screenshot) to select the quantity, of a specific product.
I tried the method below (Put Image and Container in a Stack and set visibility to false, and onTap set visibility true). But when I drag or Tap anywhere else it didn't hide.
Stack(
children: [
Column(
children: [
Image.network(
MyStrings.imgs[i],
height: 100,
),
],
),
Align(
alignment: Alignment.topRight,
child: InkWell(
onTap: () {
setState(() {
flag = true;
if (MyStrings.quantity[i] == 0) {
MyStrings.quantity[i] = 1;
}
});
},
child: Row(
children: [
Visibility(
visible: flag,
child: Container(
width: 25,
child: Center(
child: Expanded(
child: IconButton(
onPressed: () {
setState(() {
if (MyStrings.quantity[i] > 1)
MyStrings.quantity[i]--;
else {
setState(() {
MyStrings.quantity[i]--;
flag = false;
});
}
});
},
icon: Icon(Icons.remove, color: Colors.green),
),
),
),
),
),
Container(
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.green,
),
child: Center(
child: Text(
MyStrings.quantity[i].toString(),
style: TextStyle(
color: Colors.green,
),
),
),
),
Visibility(
visible: flag,
child: Container(
width: 25,
child: Center(
child: Expanded(
child: IconButton(
onPressed: () {
setState(() {
MyStrings.quantity[i]++;
});
},
icon: Icon(
Icons.add,
color: Colors.green,
),
),
),
),
),
),
],
),
),
),
],
)
Code here is too messy as I am unable to explain much that's Why I attached a Screenshot with it.
I'm attempting to create a notification widget with a number overlay.
I've followed the code here to make the widget.
Using this code (not specifying a position), produces the following widget:
Widget iconWidget() {
return Stack(
children: <Widget>[
Center(
child: Container(
child: Icon(
icon,
color: color,
),
)),
Positioned(
child: CircleAvatar(
child: Text('$count',
style: TextStyle(fontSize: 12, color: Colors.white)),
backgroundColor: count == 0 ? Colors.grey : Colors.black,
),
)
],
);
}
However, as soon as I specify a position (right: 0), my widget gets gut off:
Widget iconWidget() {
return Stack(
children: <Widget>[
Center(
child: Container(
child: Icon(
icon,
color: color,
),
)),
Positioned(
right: 0,
child: CircleAvatar(
child: Text('$count',
style: TextStyle(fontSize: 12, color: Colors.white)),
backgroundColor: count == 0 ? Colors.grey : Colors.black,
),
)
],
);
}
My widget is being created as an icon within a tab controller:
Tab(
icon: IconWithCount(
icon: FlutterIcons.heartbeat_faw5s,
color: Colors.red,
count: 5)
.iconWidget(),
),
Full class creating the widget:
class IconWithCount {
final IconData icon;
final int count;
final Color color;
IconWithCount({
this.icon,
this.count,
this.color,
});
Widget iconWidget() {
return Stack(
children: <Widget>[
Center(
child: Container(
child: Icon(
icon,
color: color,
),
)),
Positioned(
right: 0,
child: CircleAvatar(
child: Text('$count',
style: TextStyle(fontSize: 12, color: Colors.white)),
backgroundColor: count == 0 ? Colors.grey : Colors.black,
),
)
],
);
}
}
overflow is Deprecated. Use this:
Stack(
clipBehavior: Clip.none, // <---
children: [],
)
Inside the stack , just add this
overflow: Overflow.visible,
I'm trying to use the curvedNavigationBar package. Here is my code :
Widget build(BuildContext context) {
int currentTab = 2;
return Scaffold(
key: _scaffoldKey,
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: currentTab,
height: 50.0,
items: <Widget>[
Icon(Icons.home, color:currentTab==0?Colors.yellow:Colors.black, size: 30),
Icon(Icons.wifi_tethering, color:currentTab==1?Colors.yellow:Colors.black, size: 30),
Icon(Icons.flag, color:currentTab==2?Colors.yellow:Colors.black, size: 65),
Icon(Icons.mail, color:currentTab==3?Colors.yellow:Colors.black, size: 30),
Icon(Icons.account_circle, color: currentTab==4?Colors.yellow:Colors.black, size: 30),
],
color: Colors.yellow,
buttonBackgroundColor: Colors.black,
backgroundColor: Colors.black,
animationCurve: Curves.bounceInOut,
animationDuration: Duration(milliseconds: 200),
onTap: (index) {
setState(() {
currentTab = index;
});
},
),
body: Container(
color: Colors.black,
child: Center(
child: Column(
children: <Widget>[
Text(_page.toString(), textScaleFactor: 10.0),
RaisedButton(
child: Text('Go To Page of index 1'),
onPressed: () {
final CurvedNavigationBarState navBarState =
_bottomNavigationKey.currentState;
navBarState.setPage(1);
},
),
],
),
),
),
appBar: AppBar(
backgroundColor: Colors.yellow,
leading: Padding(
child: GestureDetector(
onTap: () {
_scaffoldKey.currentState.openDrawer();
},
child: CircleAvatar(
backgroundImage: ExactAssetImage('images/profile.jpg'),
radius: 30,
),
),
padding: const EdgeInsets.all(8.0),
),
title: Text("Title"),
),
drawer: DrawerCustom("Vogan", "#jbbo"),
drawerEdgeDragWidth: 0,
);
on the setState methode, I'm giving currentTab the index's value. But the icons are not being refresh, the color stay the same. I have watched for fixedColor but the package doesnt not handle this kind of properties. Same for activeIcons inside a navigationbarItem, because items property of curvednavigationBar is a list of widget. So I can not use a navigationbarItem.
How can I fix this problem?
edit
Thought it was maybe because I didn't initialize state so I did add this:
#override
void initState(){
super.initState();
}
It is still not working, I don't get it. The onPressed is working well, when I click on an icon, I go inside the method, currentTab value is updated but the icon's colors stay unchanged.
Founded it ! It was because my variable currentTab was not a global variable of the class, i declare it inside the build method, that was a mistake