I'm making a simple task app, which gets tasks from server api and then I am able to change their state from mobile.
I have a list of task items. Each item is made from Column, which has two rows (one is empty for now).
My question is - it is possible to make the text dragable, so i can drag the overflown text (to left) and see the rest of it (and then back to right)? I have found some solutions which used animations to move the text all the time. I just wanna control it with my finger.
Here is my simplified code:
return Container(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: GestureDetector(
onTap: () {
Navigator.of(context).pushNamed(TaskDetailScreen.routeName,
arguments: task.id);
},
child: Text(
task.id + ' - ' + task.name,
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
style: TextStyle(fontSize: 18),
),
),
),
ButtonTheme(
buttonColor: Color(0xff24a0ed),
minWidth: 100,
child: RaisedButton(
child: Text(
'Dokončit',
),
onPressed: () {
task.toggleActiveStatus(context);
},
),
)
],
),
Row(
children: <Widget>[],
),
],
),
padding: EdgeInsets.all(15),
color: Color(0xffcfcfcf),
);
You could try a number of solutions for this including a GestureDetector to change the Row into a Wrap widget when it finds a pan down occurring.
Related
I'm trying to make a footer and I want everything to appear Centered with even space between these three widgets in the below code.
Container(
margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 40),
child: Row(
children: <Widget>[
const Expanded(
flex: 1,
child: Text(
'All Right Reserved',
style: TextStyle(fontSize: 10),
)),
Expanded(
flex: 3,
child: Row(
children: <Widget>[
FooterItem(
title: 'Twitter',
onTap: () {},
),
FooterItem(
title: 'Instagram',
onTap: () {},
),
FooterItem(
title: 'WhatsApp',
onTap: () {},
),
],
),
),
const Expanded(
flex: 1,
child: Text(
'All Right Reserved',
style: TextStyle(fontSize: 10),
)),
],
),
)
I tried using flex as seen in the above code but it doesn't align at the center and no even space as seen in the below screenshot. How to fix this?
You can remove all Expanded and use mainAxisAlignment in parent Row:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[]
)
I'm creating an app with the main menu and different minigames, I'm starting with Flutter, so I don't understand properly how to manage the widgets properly, in this case, I have simplified the code because what I want is to understand the hierarchy, and how to place the widgets properly
child: Scaffold(
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: Container(
child: Text(_element, style: new TextStyle( fontSize: 28.0, color: Colors.black), textAlign: TextAlign.center,
),
),
),
Flexible(
flex: 1,
child: Container(
child: ElevatedButton(
child: Text('Next', style: new TextStyle( fontSize: 100.0, color: Colors.black)),
onPressed: () {
getNextElement();
},
),
),
),
],
),
),
)
With this code I get this:
What I have
I want to understand how to use widgets properly and in which order.
And my problem is that I want the button at the bottom and the text in the center, and when I press the button the text changes so when it is a longer phrase the size of the text container changes and it expands to the top of it but without changing the width, but I want it to be centered and when the text is bigger I want it to expand up and down like this:
Objective:
I'm trying to have a UI in such a way that the number of buttons in a row changes depending on available information. More specifically, there will always be one FlatButton that links to an external page, but if a download link is also provided, then there will be a second FlatButton in the row.
On the website that currently exists, we have this working for one button versus two buttons, but I can't get the one button to horizontally expand to fill the available space.
At the moment, I add the FlatButtons to a List<Widget> variable that I pass as the children for a row. I have tried using Flex -> Expanded, SizedBox.expand, CrossAxisAlignment.stretch and every solution I have found on this site so far to get it to expand, but every solution I have tried have all resulted in forced infinite width or unbounded width or non-zero flex but incoming width constraints are unbounded.
Here's my code in the build method as it currently stands:
List<Widget> fullTextDownloadBtns = new List();
if (this.fullArticleUrl != null && this.fullArticleUrl.isNotEmpty) {
fullTextDownloadBtns.add(
FlatButton(
color: Color(0x66629c44),
onPressed: _openFullArticle,
child: Text(
"Full Article",
style: TextStyle(color: Color(0xff629c44)),
),
)
);
}
if (this.downloadUrl != null && this.downloadUrl.isNotEmpty) {
fullTextDownloadBtns.add(
FlatButton(
color: Color(0x664d69b1),
onPressed: _download,
child: Text(
"Download",
style: TextStyle(color: Color(0xff4d69b1)),
),
)
);
}
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xff0096b0)
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// ...related image, title
Container(
padding: EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: fullTextDownloadBtns,
),
), // Read full article & download PDF
// ... Authors, excerpt/description, like/share buttons, comments
],
)
),
);
Wrapping your buttons with Expanded is the way to go here (I tried it with your code) :
Row(
children: [
Expanded(
child: FlatButton(onPressed: (){},
child: Text("1")),
),
Expanded(
child: FlatButton(onPressed: (){},
child: Text("2")),
)
],
),
By the way, since the SDK 2.2.2 (in your pubspec.yaml), you can use conditions within the children list :
children: [
if(true == true)
FlatButton(
onPressed: (){},
child: Text("1")),
],
I just wanted to add that you can adjust the width of the buttons border by using the 'width' property inside 'side: BorderSide(color: Colors.black54, width: 2.2)'.
Row(
children: <Widget>[
Expanded(
child: FlatButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
side: BorderSide(color: Colors.black54, width: 2.2),
),
color: Colors.white,
child: (Text('BUTTON NAME')),
),
),
],
),
Couldn't find how to change the border outline width for a long while on here. So thought I might add it here. Maybe help some other noobie like me in the future.
You can use a Row widget and use two Expanded widget which their child are FlatButton.implement the condition fot them seperately sth like:
Row(
children:[
trueCondition ? Expanded(
child: FlatButton()
) : SizedBox()
]
)
I've been toying with lists in flutter, and everything is fine. I'm starting to understand the logic of the whole thing.
Now I wanted to do a simple layout like that :
My problem is that I can't find a way to make the first row. I tried to tell Row to let its two children take half and no less no more, but I didn't really find a way. (The inside thing will eventually be buttons.)I tried several things to no avail. Here is the layout I started from :
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 50.0),
),
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: buttonPaddingTop,
left: buttonPaddingSide,
right: buttonPaddingSide),
child: ButtonTheme(
child: FlatButton(
onPressed: () {},
color: Colors.grey,
child: const Text('LARGE TEXT',
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: buttonFontSize)),
),
),
),
Padding(
padding: EdgeInsets.only(
top: buttonPaddingTop,
left: buttonPaddingSide,
right: buttonPaddingSide),
child: ButtonTheme(
child: FlatButton(
onPressed: () {},
color: Colors.grey,
child: const Text('LARGE TEXT',
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: buttonFontSize)),
),
),
),
],
),
]),
),
);
}
Should I continue trying like this, or should I try another object than Row to arrange the layout ?
Expanded takes as much space as available in this case horizontally. That means if you would use 2 Expanded widgets inside your Row, the space will be divided by half.
Try this:
Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text('first half'),
),
Expanded(
child: Text('second half'),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Text('first half'),
),
Expanded(
child: Text('second half'),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Text('full width'),
)
],
),
],
)
Make sure you read more about Flutter widgets, for example watch this video (and other ones in this series):
https://www.youtube.com/watch?v=_rnZaagadyo
I have a row in Flutter with two widgets. I'm trying to keep the first widget centered in the middle of the screen and the second widget forced to the far right of the screen.
I've tried using Spacer(). This results in the app returning a blank screen.
I've also tried using Expanded. This sends the second widget off the screen completely.
Trying mainAxisAlignment: MainAxisAlignment.spaceBetween did not seem to have any effect.
#override
Widget build(BuildContext context) {
return new Container(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Container(
child: new GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Column(
children: <Widget>[
SizedBox(height: 40.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Column(
children: <Widget>[
new Container(
child: Row(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(),
Container(
child: Text(
'Profile',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Lato',
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w700,
),
),
),
Container(
child: IconButton(
icon: Icon(
Icons.settings,
color: Colors.white,
size: 30.0,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => OnBoarding()),
);
}),
),
]),
),
),
],
),
],
),
You can use a Row with an Expanded child that contains a Stack. Centre your text with Center and position the icon with Positioned, like so:
[...]
child: Column(
children: <Widget>[
SizedBox(height: 40.0),
Row(
children: <Widget>[
Expanded(
child: Stack(
children: [
Center(
child: Text(...),
),
),
Positioned(
right: 8,
child: IconButton(...),
[...]
Simply just add Spacer() between your main text and the Icon you want to the far right.
For example:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
),
Text(
'Random test text',
style: TextStyle(color: Colors.white),
),
Spacer(),
IconButton(
icon: Icon(Icons.more_vert_rounded),
color: Colors.white,
onPressed: () {},
),
],
)
I hope this helps you. And I hope the format of the code is readable. Still getting a hang of stackoverflow comments
I did this and worked in my project
child:Row(
**crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,**
children: [
Icon(MaterialCommunityIcons.comment_outline),
Text("0"),
Icon(Icons.favorite_border),
Text("0"),
],
),
I needed align Icons and Text at right in Row widget
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end
children: [ // put your widget list and be happy ]
)
)
enter image description here
Use a row with this following structure:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(),
Container(
child: Text(
'Profile',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Lato',
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w700,
),
),
),
Container(
child: IconButton(
icon: Icon(
Icons.settings,
color: Colors.white,
size: 30.0,
),
),
),
]
),
what will happen is that the spaceBetween property will divide available space equally between the widgets in the row, so I put an empty Container, and this will force the Text widget to be in the middle of the row and the IconButton in the far end as you desire.
I noticed in your code snippet that you have a Column with a single Row which again contains a single Column , you should eliminate this redundancy to optimize your code and make it easier to debug:
Have you tried setting the mainAxisAlignment of the row to mainAxisAlignment.center?
Imo the easiest way to do this is to create a row with 2 children: The first child is an Expanded Row with all your "main" widgets. The second child is your widget which must be aligned to the end.
Row(
children: [
Expanded(
child: Row(
children: [...mainWidgets...],
),
),
...endWidget...
],
),
Note that Expanded is space-greedy. If you use e.g. MainAxisAlignment.center for your Expanded Row, then your children are drawn across the whole avialable width. If this is not to your liking, Id suggest to wrap the Expanded-Row (not Expanded) inside a Container with "constraints: BoxConstraints(maxWidth: 500)". Obviously Expanded shouldnt be Constrained.
Achieve using Expanded & Align like below inside Row:
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
...some other widgets,
Expanded(
//Expanded will help you to cover remaining space of Row
flex: 1,
child: Align(
//Align with alignment.centerRight property will move the child to righteous inside Expanded
alignment: Alignment.centerRight,
child: const Icon(Icons.arrow_back),
),
),
],
),
Note, the Expanded has to be just inside the Row children: <Widget>[],
othewise suppose you've put the GestureDetector inside Row children: <Widget>[], and inside GestureDetector you have put your Expanded, then it won't
work.
Hope this would help many one.