I am using a BottomNavigationBar and trying to add notification number next to the bar item icon (Like facebook for instance). I came up with the below and it is working fine on mobiles, however while testing on Tablet, it generated "Pixels Overflow to the right", don't understand why. the problem coming from the SizedBox Width I am giving to the icon Widget, it is generating 24 pixels overflow for the 30 width I am giving.
any idea why and how to solve it?
BottomNavyBar(
selectedIndex: _currentIndex,
backgroundColor: const Color.fromARGB(255, 248, 244, 246),
containerHeight: 50.h,
onItemSelected: (index) {
setState(() {
_currentIndex = index;
_pageController.jumpToPage(index);
});
},
items: <BottomNavyBarItem>[
BottomNavyBarItem()
BottomNavyBarItem(
title: Text('Reviews'.tr),
icon: SizedBox(
width: 30.w, //Here is the part where the problem is
height: 30.h,
),
),
activeColor: const Color.fromARGB(
255, 245, 91, 165),
inactiveColor: Colors.grey[850]),
],
),
I see you're using the BottomNavyBar package.
They're example for a BottomNavyBarItem is:
BottomNavyBarItem(
icon: Icon(Icons.people),
title: Text('Users'),
activeColor: Colors.purpleAccent
You're introducing a minWidth constraint that probably conflicts. You'll need to get rid of the sized box, not use the package or ask/pr a feature request.
Related
I'm building a Flutter Web App and am hacking the appbar for my navigation. I'm creating a dropdown menu to give some more options, only I want the arrow icons to be uniform and not change the spacing. This is an example of what I want:
And this is what I have:
It's subtle but also annoying me. This is the code I have for each dropdownbutton:
return DropdownButtonHideUnderline(
child: DropdownButton<String>(
isExpanded: false,
alignment: Alignment.center,
iconSize: 15,
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
// elevation: 16,
style: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontFamily: GoogleFonts.lora().fontFamily,
),
onChanged: (String? value) {
// This is called when the user selects an item.
setState(() {
dropdownValue = value!;
});
},
I tried wrapping them in a sized box with equal height and width, but that also didn't work, this is the closest I've gotten them.
In my app I have a NavigationRail on the left and the main body on the right. I'm using nested Navigators so that when a widget inside the IndexedStack pushes a new route the NavigationRail stays on the screen. But this generates a problem when there is a new Navigator Route on the screen and I try to change the page with NavigationRail it changes the selected icon, but the Navigator route stays on the screen.
Row(
children: [
// GestureDetector uses onHorizontalDragStart to make the Navigation
// Rail extend or shrink
GestureDetector(
onHorizontalDragStart: (details) {
setState(() {
_navRailExtended = !_navRailExtended;
});
},
child: NavigationRail(
// The width of the navigation rail
minExtendedWidth: 180,
// Text and icon themes for selected destinations
selectedIconTheme:
IconThemeData(color: Colors.purple[600]),
selectedLabelTextStyle: TextStyle(
color: Colors.purple[600],
fontWeight: FontWeight.bold,
fontSize: 16),
// Text and icon themes for unselected destinations
unselectedIconTheme:
IconThemeData(color: Colors.grey[200]),
unselectedLabelTextStyle: TextStyle(
color: Colors.grey[400],
fontWeight: FontWeight.bold,
fontSize: 15),
// Background color of the navigation rail, typical
// color for the dark theme in Flutter
backgroundColor: const Color.fromARGB(255, 47, 47, 47),
// extended makes the navigation rail wider
extended: _navRailExtended,
selectedIndex: _pageIndex,
onDestinationSelected: (int index) {
setState(() {
_pageIndex = index;
});
},
destinations: const <NavigationRailDestination>[
NavigationRailDestination(
icon: Icon(Icons.explore_rounded, size: 35),
label: Text('Discover'),
),
NavigationRailDestination(
icon: Icon(Icons.home_filled, size: 35),
label: Text('Notebook'),
),
NavigationRailDestination(
icon: Icon(Icons.games_sharp, size: 35),
label: Text('Games'),
),
NavigationRailDestination(
icon: Icon(Icons.analytics_outlined, size: 35),
label: Text('Analytics'),
),
],
),
),
// A vertical divider between the navigation rail and the body
const VerticalDivider(thickness: 1.5, width: 1),
// Expanded makes the body of the windows app centered
// (without it the row widget would screw up the sizing of the app)
Expanded(
// Navigator makes all new routes inside the main pages
// opened with 'Navigator.pop()' ignore the navigation rail,
// i.e. the navigation rail will always stay opened
child: Navigator(
onGenerateRoute: (settings) {
return MaterialPageRoute(builder: ((context) {
// Indexed Stack keeps the state of each page unchanged
return IndexedStack(
index: _pageIndex,
children: const [Discover(), NoteBook(), Games(), Analytics()],
);
}));
},
),
)
],
)
App on the start:
When there is a new Navigator route on the screen:
I try to change the page:
What it should do:
I'm trying to figure out how to create a broken-dash progress bar around a profile image in Flutter, but am unsure how to proceed.
My original plan revolved around using borders, but I don't seem to be able to choose the length of a border. It always wraps around the entire widget, which is not what I want.
An example of what I'm looking for would be https://dribbble.com/shots/13974030-Longwalks-iOS-App-featured-by-Oprah-Winfrey
Ideally, I'd want the bar to be broken up into 5 or 10 "chunks" that each represent some percentage for at-a-glance visualization.
Which widgets should I be using for this?
You can try using sleek_circular_slider.
You can use it as a slider or a progress bar. Here's an example of how it would be used.
For it to be used as a progress bar just remove the onChange or onChangeEnd, this will remove the user's ability to interact with it.
final slider = SleekCircularSlider(
min: 0,
max: 1000,
initialValue: 426,
onChange: (double value) {
// callback providing a value while its being changed (with a pan gesture)
},
onChangeStart: (double startValue) {
// callback providing a starting value (when a pan gesture starts)
},
onChangeEnd: (double endValue) {
// ucallback providing an ending value (when a pan gesture ends)
},
innerWidget: (double value) {
// use your custom widget inside the slider (gets a slider value from the callback)
},
);
I'm not sure about dividing it into 'chunks' but it should be possible.
dashed_circular_progress_bar: ^0.0.4 pluggin used
SizedBox(
height: 20,
width: 20,
child: DashedCircularProgressBar.aspectRatio(
aspectRatio: 2, // width รท height
progress: 25,
startAngle: 360,
sweepAngle: 360,
circleCenterAlignment: Alignment.bottomCenter,
foregroundColor: Colors.blue,
backgroundColor: const Color(0xffeeeeee),
foregroundStrokeWidth: 3,
backgroundStrokeWidth: 2,
backgroundGapSize: 2,
backgroundDashSize: 1,
//seekColor: Colors.yellow,
//seekSize: 22,
animation: true,
child: SizedBox(
child: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(0,8,12,3),
child: Icon(
Icons.play_arrow,
color: Colors.blue,
size: 20
),
),
),
),
),
)
Widget build(BuildContext context) {
print("homepage");
final navigation = Provider.of<NavigationProvider>(context, listen: false);
return Consumer<ThemeProvider>(builder: (context, themeData, _) {
return Scaffold(
backgroundColor: themeData.getTheme['mainBackground'],
appBar: AppBar(
backgroundColor: themeData.getTheme['appBar'],
elevation: 0.0,
title: Text(
"INTRADAE",
style: GoogleFonts.montserrat(
color: themeData.getTheme['textColor'],
),
),
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 5),
child: IconButton(
icon: Icon(
Icons.account_balance_wallet,
size: 30,
color: themeData.getTheme['textColor'],
),
onPressed: null,
),
)
],
),
body: Consumer<NavigationProvider>(
builder: (context, navigationProvider, _) =>
navigationProvider.getNavigation),
bottomNavigationBar: CurvedNavigationBar(
index: 0,
height: 50,
color: themeData.getTheme['secondaryBackground'],
backgroundColor: themeData.getTheme['mainBackground'],
buttonBackgroundColor: themeData.getTheme['mainBackground'],
items: <Widget>[
Icon(Icons.home, color: Colors.white),
Icon(Icons.shopping_cart, color: Colors.white),
Icon(Icons.person, color: Colors.white)
],
onTap: (index) {
navigation.updateNavigation(_pages[index]);
},
),
);
});
I am trying to update whatever is inside the body of the scaffold when updateNavigation takes place. Everything seemed fine, until I put a print inside the build method of the main widget and noticed that it was being called on every update the to NavigationProvider.
I am scratching my head since. I can't understand why this widget has to rebuild when only the Consumers should rebuild which in this case is inside the body of the Scaffold.
Coming from a React background this just seems weird to me.
Can anyone tell me why this is happening?
The problem was solved once I performed a hot restart. I then read about Hot Reload in Flutter the docs and realised that the changes I was making to the code weren't going to be seen unless I performed a hot restart.
Although the code posted here has
listen:false
in,
Provider.of<NavigationProvider>(context, listen: false)
But, I originally did not have that in my code. And when adding that argument too didn't seem to help, I decided to post a question here.
The problem was hot reload all along. Should've have made sure before posting.
assume the following code
ChipTheme(
data: theme.chipTheme.copyWith(
//labelStyle: TextStyle(color: Colors.black),
secondaryLabelStyle: TextStyle(color: Colors.black),
//selectedColor: Colors.black,
secondarySelectedColor: Colors.grey[300],
//brightness: Brightness.light
),
child:
Row(
children: <Widget>[
Chip(
//selected: currentLevel >= 1,
label: new Text("Level 1"),
avatar: new CircleAvatar(
backgroundColor: Colors.green,
child: Text("1")
),
),
ChoiceChip(
selected: currentLevel >= 2,
label: new Text("Level 2"),
avatar: new CircleAvatar(
backgroundColor: Colors.green,
child: Text("2")
),
),
ChoiceChip(
selected: currentLevel >= 3,
label: new Text("Level 3"),
avatar: new CircleAvatar(
backgroundColor: Colors.green,
child: Text("3")
),
),
],
),
),
This results looks like this:
The first one is a simple Chip widget. This is what i want to have as "selected" ChoiceChip. But as you can see, the second Chip looks differently compared to the first one. Why is that? I am happy with the 3rd one which is a not-selected ChoiceChip. No matter what i do, i cant get the 2nd one to look like the first one because ChoiceChip seems to darken everything (the green avatar and also the background color).
The selected ChoiceChip doesnt even look like it is selected or active. It looks nearly as the unselected one (3rd one).
Thanks for any hints how to get the styling right.
Behold, solution may seem frustrating to you. At least it frustrated me a lot until I figured it out.
A ChoceChip behaves like a button. Now a button expects a non-null onPressed parameter. Which, if not provided, renders the disabled state of button.
Similarly ChoiceChip expects a non-null onSelected parameter. So a valid ChoiceChip declaration looks like below:
ChoiceChip(
selected: currentLevel >= 2,
label: new Text("Level 2"),
avatar: new CircleAvatar(
backgroundColor: Colors.green,
child: Text("2")
),
onSelected: (value) {}
),
And voila, you have the pretty looking ChoiceChips.