Flutter inline boxes without wordwrap - flutter

I am developing an app with a menu at the bottom, this is the result:
I wrote the following code:
return Row(
children: menuItems
.asMap()
.entries
.map(
(x) => Expanded(
child: Container(
decoration: const BoxDecoration(
color: HGVColors.grey,
),
child: InkWell(
onTap: () => setTitle(x.key),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
"assets/images/${x.value.icon}.svg",
height: 25,
color: getColor(x.key == currentIndex),
),
Text(
x.value.label,
style: TextStyle(
color: getColor(x.key == currentIndex),
),
),
],
),
),
),
),
)
.toList(),
);
However, the desired result is followings:
What can I do in order that Konventionen is not wrapped to a new line, but stretches its container?


I found a solution:
return Container(
decoration: const BoxDecoration(
color: HGVColors.grey,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: menuItems
.asMap()
.entries
.map(
(x) => InkWell(
onTap: () => setTitle(x.key),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
"assets/images/${x.value.icon}.svg",
height: 25,
color: getColor(x.key == currentIndex),
),
child: Text(
x.value.label,
style: TextStyle(
color: getColor(x.key == currentIndex),
),
),
],
),
),
)
.toList(),
),
);
The key is mainAxisAlignment: MainAxisAlignment.spaceEvenly.

Related

title widget to be centered and icon widgets at the right side in one row

the question is exactly same as this post
but I did not find an answer from the post.
my goal is to set the title widget in the center
and other two buttons on the right side.
the solutions in the link all put the title widget slightly on the left side.
does anyone know how to do this without using Stack? I'm afraid of the title widget being over the button widgets when the title gets too long.
the code:
SizedBox(
height: 40,
width: MediaQuery.of(context).size.width,
child: Row(
children: [
const SizedBox(width: 17),
Text(
'TITLE',
style: const TextStyle(
color: Colors.white, fontSize: 30, fontWeight: FontWeight.w500),
),
Spacer(),
Row(
children: [
GestureDetector(
onTap: (){null;},
child: SizedBox(
child: Icon(Icons.wallet_membership, color: Colors.white),
),
),
const SizedBox(width: 17),
GestureDetector(
onTap: (){Get.toNamed('/wallet_setting');},
child: const SizedBox(
child: Icon(Icons.settings, color: Colors.white),
),
),
]
)
]
),
)

Try this One
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Container(
child: Center(
child: Text(
'TITLE',
style: const TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.w500),
),
)
)
),
Align(
alignment: Alignment.centerRight,
child: Row(
children: [
GestureDetector(
onTap: (){null;},
child: SizedBox(
child: Icon(Icons.wallet_membership, color: Colors.white),
),
),
const SizedBox(width: 17),
GestureDetector(
onTap: (){Get.toNamed('/wallet_setting');},
child: const SizedBox(
child: Icon(Icons.settings, color: Colors.white),
),
),
]
)
)
],
)
OutPut:

i think you should wrap it with centre

Try this approach:
first make widget from your right widgets:
Widget _rightIcons() {
return Row(children: [
GestureDetector(
onTap: () {
null;
},
child: SizedBox(
child: Icon(Icons.wallet_membership, color: Colors.white),
),
),
const SizedBox(width: 17),
GestureDetector(
onTap: () {
Get.toNamed('/wallet_setting');
},
child: const SizedBox(
child: Icon(Icons.settings, color: Colors.white),
),
),
]);
}
then build your header like this:
Row(
children: [
_rightIcons(),
Expanded(
child: Center(
child: Text(
'TITLE',
style: const TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.w500),
),
),
),
Opacity(
opacity: 0,
child: _rightIcons(),
)
],
),

You can use centerTitle:true on Appbar
appBar: AppBar(
centerTitle: true,
title: Text("title"),
actions: [
Another way
Container(
color: Colors.purple,
height: 40 * 2,
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.navigate_before)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: SizedBox(),
),
Expanded(
flex: 4,
child: Text(
'TITLE',
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.w500),
),
),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
child: Icon(Icons.wallet_membership,
color: Colors.white),
),
const SizedBox(width: 17),
GestureDetector(
onTap: () {},
child: const SizedBox(
child:
Icon(Icons.settings, color: Colors.white),
),
),
]),
),
)
],
),
],
),
)
Preferable solution:
You can implements PreferredSizeWidget to create custom Appbar. Play with color and other decoration.
class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
const MyAppBar({super.key});
#override
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Text("title"),
),
Align(
alignment: Alignment.bottomRight,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
//you can use callback method to get onpressed
onPressed: () {},
icon: Icon(Icons.settings),
),
IconButton(
onPressed: () {},
icon: Icon(Icons.settings),
),
],
),
)
],
);
}
#override
Size get preferredSize => const Size.fromHeight(kToolbarHeight * 2);
}
And use like appBar: MyAppBar(),

textoverflow inside custom list tile

I have a ListView and I want to display the items in my custom list tile, the problem is that my text oveflow the tile, i want to add TextOverflow.ellipsis but it doesn't work.
Here's my code:
return Expanded(
child: ListView.builder(
itemCount: songss.length,
itemBuilder: (context, index) {
Song song = songss[index];
return Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: kPrimaryColor))),
margin: const EdgeInsets.only(left: 16.0),
child: InkWell(
child: Column(
children: <Widget>[
SizedBox(height: 12.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Text("${index + 1}",
style: Theme.of(context).textTheme.subtitle2),
SizedBox(width: 16.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
song.title,
style: Theme.of(context).textTheme.subtitle1,
overflow: TextOverflow.ellipsis, //Here i want to handle overflow
),
Text(_getSongDuration(song.duration),
style: Theme.of(context).textTheme.subtitle2),
],
),
],
),
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Row(
children: <Widget>[
IconButton(
onPressed: () => null,
icon: Icon(Icons.favorite_border),
),
GestureDetector(
onTapDown: (TapDownDetails details) =>
null,
child: Icon(Icons.more_horiz),
),
],
),
)
],
),
SizedBox(height: 12.0),
],
),
),
);
},
),
);
I tried using expanded and flex but it gives me error.
Do you know how to solve it?

Give height,width to the Parent Widget of Text widget and then wrap Text with Expanded
Your error will be solved as expanded/flex need some max parent size to take space from.

I've actualy managed to solve the problem.
return Expanded(
child: ListView.builder(
itemCount: songss.length,
itemBuilder: (context, index) {
Song song = songss[index];
return Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: kPrimaryColor))),
margin: const EdgeInsets.only(left: 16.0),
child: InkWell(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text("${index + 1}",
style: Theme.of(context).textTheme.subtitle2),
SizedBox(width: 16.0),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
song.title,
style: Theme.of(context).textTheme.subtitle1,
overflow: TextOverflow.ellipsis,
),
Text(_getSongDuration(song.duration),
style: Theme.of(context).textTheme.subtitle2),
],
),
),
IconButton(
onPressed: () => null,
icon: Icon(Icons.favorite_border),
),
GestureDetector(
onTapDown: (TapDownDetails details) => null,
child: Icon(Icons.more_horiz),
),
],
),
),
);
},
),
);
I've just rewrote the whole list, removing one or two rows.
So i'm gonna answer the question, thank you for your help tho.

Flutter: Place a particular widget in a row at center

How to place the "question mark" at center of row?
Expected result is "?" are all at center regardless of the values on left/right.
body: ListView.builder(
itemCount: testList.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.green,
child: Text(testList[index].n1.toString(), style: TextStyle(fontSize: 80,)),
),
Container(
color: Colors.red,
child: Text(testList[index].x, style: TextStyle(fontSize: 80,)),
),
Container(
color: Colors.green,
child: Text(testList[index].n2.toString(), style: TextStyle(fontSize: 80, )),
),
],
),
Text('>'),
Text('<'),
Text('='), //
],
),
);
}),

You can use row and Expanded with flex widget to achieve your desire output.
Following minimal code help you more.
Card(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 1,
child: Row(
children: [
Expanded(child: Container()),
Container(
color: Colors.green,
child: Text('10',
style: TextStyle(
fontSize: 80,
)),
),
],
),
),
Container(
color: Colors.red,
child: Text("?",
style: TextStyle(
fontSize: 80,
)),
),
Expanded(
flex: 1,
child: Row(
children: [
Container(
color: Colors.green,
child: Text('100',
style: TextStyle(
fontSize: 80,
)),
),
Expanded(child: Container()),
],
),
),
],
),
Text('>'),
Text('<'),
Text('='), //
],
),
)

how to set the size of rows and columns as their parent widget in flutter?

Using a Column in a Row which is a child of a Card widget, how do I set the Column width as large as the row widget?
return Card(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(4.0),
child: Container(
width: 100.0,
height: 100.0,
// container for image
color: Colors.grey,
),
),
Column(
//crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Item Name',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
Text(
'Previous Price',
style: TextStyle(fontSize: 15.0, color: Colors.grey),
),
Row(
children: <Widget>[
RaisedButton(
textColor: Colors.white,
child: Text('Add'),
),
Icon(Icons.add),
Container(
width: 50.0,
height: 50.0,
child: Text('12'),
color: Colors.red[200],
),
Icon(Icons.remove),
],
),
],
),
],
),
)

import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Container(
child: Card(
child: Row(
children: [
Padding(
padding: const EdgeInsets.all(4.0),
child: Container(
width: 100.0, height: 100.0,
// container for image
color: Colors.grey,
),
),
Container(
color: Colors.red,
child: Column(
mainAxisSize: MainAxisSize.min,
//crossAxisAlignment: CrossAxisAlignment.stretch,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Item Name',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
Text(
'Previous Price',
style: TextStyle(fontSize: 15.0, color: Colors.grey),
),
Container(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
RaisedButton(
textColor: Colors.white,
child: Text('Add'),
onPressed: () {},
),
Icon(Icons.add),
Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
width: 50.0,
height: 50.0,
child: Center(child: Text('12')),
color: Colors.red[200],
),
),
Icon(Icons.remove),
],
),
),
],
),
),
],
),
),
),
)));
}
}
let me know if this works maybe I am correct, but still, the description is about confusing. looking at your code I made the prediction.
Thanks.

I'm a little confused by your description,
but crossAxisAlignment: CrossAxisAlignment.stretch might be the answer to the title.

Try using,
Expanded(
child:Container(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
RaisedButton(
textColor: Colors.white,
child: Text('Add'),
onPressed: () {},
),
Icon(Icons.add),
Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
width: 50.0,
height: 50.0,
child: Center(child: Text('12')),
color: Colors.red[200],
),
),
Icon(Icons.remove),
],
),
),
)

[flutter]Why my column alignment is always center?

I declared two columns in a row to layout the text and the icon.
The column for the icon is always center even if I set the mainAxisAlignment with MainAxisAlignment.start.
Here is the code for the card:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:life_logger/models.dart';
import 'package:life_logger/screens/entry_editor_screen.dart';
import 'package:life_logger/widgets/dot.dart';
Wrap buildActivities(Entry entry) {
var children = <Widget>[];
var idx = 0;
entry.activities.forEach((activity) {
var element = Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
Icon(
activity.iconData,
color: entry.mood.color,
),
SizedBox(
width: 3,
),
Text(
'${activity.description}',
style: TextStyle(color: Colors.grey),
),
]);
children.add(element);
if (idx < entry.activities.length - 1) {
children.add(Dot());
}
idx++;
});
return Wrap(
children: children,
spacing: 5,
crossAxisAlignment: WrapCrossAlignment.center,
);
}
Widget buildEntryRow(Entry entry, BuildContext context) {
var entryRow = GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => EntryEditorScreen(entry)),
);
},
child: Row(
children: <Widget>[
// the column for the icon
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 8.0, right: 8.0),
child: Icon(
entry.mood.iconData,
color: entry.mood.color,
size: 48,
),
),
],
),
Expanded(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Baseline(
baseline: 30.0,
baselineType: TextBaseline.alphabetic,
child: Text(
entry.mood.description,
style: TextStyle(
color: entry.mood.color,
fontSize: 24,
),
),
),
Baseline(
baseline: 30.0,
baselineType: TextBaseline.alphabetic,
child: Text(
DateFormat.Hm().format(entry.createdAt),
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(child: buildActivities(entry)),
],
),
Row(
children: <Widget>[
Text(
entry.note,
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),
),
],
),
],
),
),
],
));
return entryRow;
}
class EntryCard extends StatefulWidget {
final List<Entry> entries;
EntryCard(this.entries);
#override
_EntryCardState createState() => _EntryCardState();
}
class _EntryCardState extends State<EntryCard> {
#override
Widget build(BuildContext context) {
var dateRow = Container(
height: 30,
decoration: BoxDecoration(
color: widget.entries[0].mood.color.withOpacity(0.5),
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.5, right: 24.5),
child: Ring(
size: 5.0,
color: widget.entries[0].mood.color,
),
),
Text(
DateFormat('EEEEE, M月d日').format(widget.entries[0].createdAt),
style: TextStyle(
color: widget.entries[0].mood.color,
fontSize: 14,
),
)
],
));
return Card(
child: Column(
children: <Widget>[dateRow] +
widget.entries.map((entry) => buildEntryRow(entry, context)).toList(),
));
}
}
The actual layout as follow:

Use crossAxisAlignment: CrossAxisAlignment.start
And for future, I would suggest you to add code that is independent of other code so that others can run it and see.

like that for one widget
Container(
child: Align(
alignment: Alignment.centerRight,
child: Text(S.current.forgetPassword),
),
),
or for all
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,

If you want you can adjust column according to you .
Here is code of how to call widgets of columns at start.
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,

Use it :
Column(
children: const <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text('Text 1')
),
Align(
alignment: Alignment.centerLeft,
child: Text('Text 2')
),
],
)

Setting the height of the Container worked for me:
height: double.infinity,