Is there a way to reverse the order of Children inside Column?
Because I'm using a custom Widget and the widget appears two times: first time the order is good, the second time order is reversed.
Need to reverse the order of Text elements in Column:
Column(
verticalDirection: VerticalDirection.up,
children: [
Text(
dTDInfoValue,
style: const TextStyle(
fontSize: AppFontSizes.aboutMountainDTDInfoText,
color: AppColors.aboutMountainDTDInfoColor,
fontWeight: FontWeight.w400),
),
const SizedBox(height: AppConstants.aboutMountainDTDSizedBoxHeight),
Text(
dTDInfoName,
style: const TextStyle(
fontSize: AppFontSizes.aboutMountainDTDNameText,
color: AppColors.aboutMountainDTDInfoNameColor),
)
],
)
Use the List<Widget> to store the Widget you need.
List<Widget> _widgetList = [/* your Widgets */];
Column(
verticalDirection: VerticalDirection.up,
children: [
for(int i=0; i<_widgetList.length; i++)
_widgetList[i];
],
)
Use the reversed method of List to reverse the order.
_widgetList.reversed;
You are trying to change the order of item, It will be easier to make a list and then reverse if needed.
You can do something like
body: Column(
// verticalDirection: VerticalDirection.up,
children: [
...[
Text(
"XdTDInfoValue",
style: const TextStyle(fontWeight: FontWeight.w400),
),
const SizedBox(height: 100),
Text(
"dTDInfoName",
),
].reversed.map((e) => e).toList()
],
),
Create a state variable of type List
say
List<Widget>myList=[Widget1, Widget2, Widget3...],
and to reverse use method myList.reversed.
Assign this variable to Column children and use myList.reversed within setState whenever you need to reverse the list.
List<String> randomWords = ['abc', 'xyz', '123'];
List<String> reversedRandomWords = randomWords.reversed.toList();
print(reversedRandomWords); // [ '123','xyz', 'abc'];
Related
starCountRef.orderByChild('Series').startAt('sam').endAt('1')
This code only work if I use int values to fetch data; string values are not fetching the data.
DatabaseReference starCountRef =
FirebaseDatabase.instance.ref('/Shop/qw1234/Inventory/');
bool data = false;
Expanded(
child: FirebaseAnimatedList(
query: starCountRef
.orderByChild('Series')
.startAt('sam')
.endAt('1'),
itemBuilder: (context, snapshot, animation, index) {
return ListTile(
onTap: (() {
print(index);
}),
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text('Price: Rs '),
Text(
snapshot.child('Price').value.toString()),
],
),
],
),
subtitle: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'Model: ',
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text(snapshot
.child('Series')
.value
.toString()),
],
),
],
),
),
);
}),
)
My firebase realtime database I am trying to setup a search box to search product and edit or delete them
Can any one help me? I am developing an inventory app for a shop. I am trying to make a search box so the owners can see their stock limits and item prices.
I rather think the firebase query works in ASCII order. In ASCII order, numbers appear before letters so starting at 'a letter string' and ending at 'a number string' is likely to cause you problems.
I don't see a '1' in your example of 'Series', you aren't trying to reference the '1' child in the 'Inventory' node are you?
I'm trying to use flexible on my text cause it's overflow but for some reason expanded or neither flexible didn't work. But it work on other text widget on different screen. Anyone know why ? How can I fix this ?
return Row(
children: [
/// Ticket Details
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
/// Ticket Title
Flexible(
child: Text(
ticketData['title'],
style: primaryColor700Style.copyWith(
fontSize: fontSize18,
),
),
),
SizedBox(height: 8),
/// Date Created
Text(
'Created : ' +
DateFormat('d MMM y').format(
DateTime.parse(
ticketData['date_created'].toDate().toString(),
),
),
style: primaryColor400Style.copyWith(
fontSize: fontSize12,
),
),
],
),
/// Urgent Icon
if (ticketData['is_urgent'])
Icon(
Icons.warning_rounded,
size: 35,
color: warningColor,
),
],
);
Wrap the column with flexible
Row(
children: [
Flexible(
child: Column(
children:[
Text(),
]
)
)
]
)
Row takes infinite width, To get available width row for next children you can wrap Expanded/ Flexibile/ fixed width widget. You can check this doc more about.
You can find this from Layout algorithm on Row
Expanded, to indicate children that should take all the remaining room.
Flexible, to indicate children that should share the remaining room but that may by sized smaller (leaving some remaining room unused).
As the children of a Column I add e.g. this Widget like so
Column(
children: [
... other Widgets above ...
Chip(
label: Text(
myItem.properties['Status'].currentValue,
style: TextStyle(
color: Colors.white,
fontSize: 10,
),
),
backgroundColor: Colors.blue,
shadowColor: Colors.grey[60],
),
... other Widgets below ...
]
)
Since now I don't have one single properties['Status'] but several properties[...] I want to replace the Chip(...) with several Chip()s instead.
May I somehow operate on properties in such a way, that it returns several Chip()s and places it above inline in Columns children list?
You can use the spread operator or array destructor operator if you want to use it in line, like this:
Column(
children: [
// ... other Widgets above ...
// use the spread (...) operator in front of
// the mapping method that returns a List<Clip> widgets,
// and add all chips inside the array
// assuming that properties['Status'] is an array of some sort
...properties['Status'].map((p) {
return Chip(
label: Text(
p.currentValue, // consume here the object in the iteration
style: TextStyle(
color: Colors.white,
fontSize: 10,
),
),
backgroundColor: Colors.blue,
shadowColor: Colors.grey[60],
);
}).toList(),
// ... other Widgets below ...
]
)
I have two widget : Text A, Text B, Text A is very long text,
B is right , I want to fix B position and full visible, and let A widget using remaining space and new line to show B text.
Here is the code:
Row(
children: <Widget>[
Text('AAAAAAAAAAAA--------------------------------------------------------'),
//Spacer(),
Text(
"BBBBBBBBB",
style: TextStyle(fontSize: 13, color: Color(0xFF666666)),
)
],
)
Row(
children: <Widget>[
Expanded(child: Text(
'AAAAAAAAAAAA---------------------------------------------------------------------------------------------------')),
//Spacer(),
Text(
"BBBBBBBBB",
style: TextStyle(fontSize: 13, color: Color(0xFF666666)),
)
],
)
I can center the DataCell in a DataRow but how do you do it for the DataColumn label?
I want the first DataColumn left justified and the rest centered. Wrapping the label in a Center widget does not take effect.
new DataColumn(
label: Center(
child: Text(statName,textAlign: TextAlign.center,
style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),),
)
);
Found how:
DataColumn(
label: Expanded(
child: Text(
'Label',
textAlign: TextAlign.center,
))),
You may want to wrap the contents of the Label in a Center widget. There's also an Align widget that uses alignment: Alignment.center and your Text as it's child.
This is how i resolved this issue :
DataColumn(
label: Center(
widthFactor: 5.0, // You can set as per your requirement.
child: Text(
'View',
style: style_16_bold_primary,
),
),
),
I had the same problem and solved the issue by commenting the following code section in data_table.dart file.
if (onSort != null) {
final Widget arrow = _SortArrow(
visible: sorted,
down: sorted ? ascending : null,
duration: _sortArrowAnimationDuration,
);
const Widget arrowPadding = SizedBox(width: _sortArrowPadding);
label = Row(
textDirection: numeric ? TextDirection.rtl : null,
children: <Widget>[ label, arrowPadding, arrow ],
);
}