I want to use badges package to display a badge on items in a Row but like in the screen below the next element is draw on top of the badge.
Row(
children: List.generate(
7,
(index) => Expanded(
child: Padding(
padding: const EdgeInsets.all(2),
child: Badge(
badgeContent: Text('a'),
child: Container(
color: Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
),
),
),
),
),
),
I expect the badge to be displayed on top of all the elements
Thanks for your help.
I think you can't obtain the effect you want with that package because the badge is rigorously connected to the child Container so it doesn't have control over others UI elements.
I think that you need to set a margin so each element has the necessary space to being showed.
Related
Please tell me how to implement the drop down list. Only not the usual list that appears above the blocks, but I need the table to move away on the click of a button and all the lower elements also move down to the desired distance. I found similar widgets like ExpansionPanelList, but I don't know if it's realistic to implement this, or maybe you are familiar with similar widgets that can implement such an action. I will be grateful for help.
I need this table to pop up.
Table _blockDetails(blocksInfoData) {
return Table(
border: TableBorder.all(color: Colors.grey.shade400),
children: [
TableRow(decoration: BoxDecoration(color: Colors.grey[200]), children: [
const Padding(
padding: EdgeInsets.all(15),
child: Text(
'Size',
style: TextStyle(fontWeight: FontWeight.bold),
)),
Padding(
padding: const EdgeInsets.all(15),
child: Text('${blocksInfoData.size}')),
]),
TableRow(decoration: BoxDecoration(color: Colors.grey[200]), children: [
const Padding(
padding: EdgeInsets.all(15),
child:
Text('Nonce', style: TextStyle(fontWeight: FontWeight.bold))),
Padding(
padding: const EdgeInsets.all(15),
child: Text('${blocksInfoData.nonce}')),
]),
],
);
}
That's how it is here
You could use the Visibility widget witch will allow you to show or hide widgets, so you can wrap your button with the visibility widget and make a bool value and set it to true or false depends on your choice, and use the onPressed of the button and set the bool value to true or false. This will allow you to show the details when you want to in this case when you press the button. If the answer helps pls let me know. Visibility widget >> https://api.flutter.dev/flutter/widgets/Visibility-class.html
I'm new to flutter and have been trying to get a list of chipsets wrapped in a Wrap widget with the ability to add more of them through a button shown in the image. However, the button isn't able to wrap along with the chipset horizontally. Below is an image of the design to make it clearer.
Code:
Container(
child: Wrap(
children: [
Container(
child: Wrap(
children: _chipsetList,
),
),
SizedBox(width: 2),
Container(
height: 35,
width: 35,
child: FittedBox(
child: FloatingActionButton(
heroTag: null,
elevation: 0,
shape: StadiumBorder(
side: BorderSide(width: 2.0)),
onPressed: () {
_getMoreChips(context);
},
child: Icon(Icons.add),
),
))
],
),),
I tried to experiment with SingleChildScrollView property or with Wrap direction but in vain. What could be a way to get this design working?
Seems you want to put chips and the button in the single wrap. To do so, combine them in a single list and use this list as wrap's children
List<Widget> items = List.from(_chipsetList); // copy
Widget button = FloatingActionButton();
items.add(button);
Wrap(
children: items,
)
Or, using spread operator
Wrap(
children: [
..._chipsetList,
FloatingActionButton(),
],
)
I have an horizontal SingleChildScrollView widget with variable amount of different buttons. I want to display button with right arrow only when there is too much buttons to show all on screen. I want to avoid situation when someone could dont know about more buttons hidden behind right edge of the screen.
How to achieve this?
Container(
height: iconsBarHeight,
color: Theme.of(context).scaffoldBackgroundColor,
padding: const EdgeInsets.fromLTRB(16, 16, 8, 0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Button2(),
Button4(),
Button1(),
Button6(),
Button7(),
Button3(),
Button2(),
],
),
),
);
you can add ScrollControlller to SingleChildScrollView, and get the max extent of it. If max extent is greater than width of screen, then show the button.
scrollController.position.maxScrollExtent
The problem is visible on the attached screenshot.
Code of a main widget:
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(
child: Decor(
child: Container(),
),
flex: 1,
),
Flexible(
child: Decor(
child: Container(),
),
flex: 6,
)
],
);
Code of a Decor widget:
Container(
decoration: BoxDecoration(
color: COLOR,
),
margin: const EdgeInsets.symmetric(
horizontal: MEDIUM_PADDING,
),
padding: const EdgeInsets.all(MEDIUM_PADDING),
width: 300.0,
child: child,
);
Answering in advance "Why would you even need to do such a Decor Widget"? Both flexibles will be populated with data of some sort. Second flexible will be with a ListView inside and the first one will be a "Header" for what is inside a ListView. Data is retrieved from server every 10s, so the main widget is wrapped with a StreamBuilder.
Problem is that StreamBuilder cannot be shrinked to the size of its child, whereas ListView can, so I wrap both "Header" and a ListView in Decor so that grey background color doesn't take all available space on a screen which than produces black line seen on a screenshot?
So the question is: is there a way either to remove the black line between two widgets in a column?
Also, if you know magic of how to shrink StreamBuilder to the size of its child please answer here too.
Ok I know that this is not a very nice solution and more like workaround but I think the only way to get rid of the line is to set border color of the container in your Decor widget
Container(
decoration: BoxDecoration(
color: COLOR,
border: Border.all(width: 0, color: COLOR) //added line
),
margin: const EdgeInsets.symmetric(
horizontal: MEDIUM_PADDING,
),
padding: const EdgeInsets.all(MEDIUM_PADDING),
width: 300.0,
child: child,
);
First I thought setting border width to 0 will help it but that didn't work.. Color did
If use the Stepper in horizontal mode, I get the following result.
However, I want the title of the Step to appear below the counter. How can I achieve that in Flutter?
In _StepperState class there is method _buildHorizontal with code:
Row(
children: <Widget>[
Container(
height: 72.0,
child: Center(
child: _buildIcon(i),
),
),
Container(
margin: const EdgeInsetsDirectional.only(start: 12.0),
child: _buildHeaderText(i),
),
],
),
where _buildHeaderText returns title or title with subtitle.
So, you can't do what you want with standard Stepper - you have to customize this class