I'm using TextAlign to centre one piece of text and then again to send another piece of text to the right, all contained in a Row, but the alignment does nothing at all.
Scaffold(
body: Row(
children: <Widget>[
Text('Align Centre', textAlign: TextAlign.center),
Text('Align Right', textAlign: TextAlign.right),
],
),
);
You can see here it's ignored completely:
It sounds like you are after something like this:
return Scaffold(
body: Center(
child: Row(
children: <Widget>[
SizedBox(width: MediaQuery.of(context).size.width / 3.3333333,),
Expanded(child: Text('Align Centre adding more text heree....', textAlign: TextAlign.center)),
Expanded(child: Text('Align Right', textAlign: TextAlign.right)),
],
),
),
);
By adding an empty container first into the row it pushed the Align Center text into the middle.
Edit: Instead of using an expanded widget used a sized box instead and fix the width to consume a 3rd of the view.
Wrap Text with Expanded widget:
Scaffold(
body: Row(
children: <Widget>[
Expanded(child: Text('Align Centre', textAlign: TextAlign.center)),
Expanded(child: Text('Align Right', textAlign: TextAlign.right)),
],
),
);
By default Text takes up space only required for content.
Or what you probably want:
Scaffold(
body: Stack(
children: <Widget>[
Positioned.fill(
child: Text('Align Centre', textAlign: TextAlign.center)),
Positioned.fill(
child: Text('Align Right', textAlign: TextAlign.right)),
],
),
);
Scaffold(
body: Row(
children: <Widget>[
Container(
width:screen_width/2,
alignment: Alignment.center,
child: Text('Align Centre',),
),
Container(
width:screen_width/2,
alignment: Alignment.centerRight,
child: Text('Align right',),
),
],
),
);
and you can get screen_widht by
double screen_width = MediaQuery.of(context).size.width;
Related
I am working on a flutter app and I need to make a part of the code scrollable. The full code:
return Scaffold(
appBar: AppBar(
title: Text(_title),
),
body: Column(
children: [
Padding(
padding: EdgeInsets.only(bottom: 30),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
...
],
),
for (var day in data)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
day.getDate(),
style: getDataLabelStyle(),
),
Text(
day.getStarting(),
style: getDataLabelStyle(),
),
Text(
day.getEnding(),
style: getDataLabelStyle(),
),
],
),
],
),
);
And this part should be scrollable:
for (var day in data)
Row(
...
],
),
Also you can see what part should be scrollable:
Thanks in advance
Use ColumnBuilder and then Wrap it with singleChildScrollView like this:
Expanded(
child: SingleChildScrollView(
child: Column(children: List.generate(data.lenght, (index){
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
day.getDate(),
style: getDataLabelStyle(),
),
Text(
day.getStarting(),
style: getDataLabelStyle(),
),
Text(
day.getEnding(),
style: getDataLabelStyle(),
),
],
);
}),),
),
)
You can achieve your task using the SingleChildScrollView Class.
For your given code you can achieve this by wrapping your row into Column and again wrap it with SingleChileScrollView.
The full solution is:
....
SingleChildScrollView(
child: Column(
children: [
for (var day in data)
Row(
children: [
.......
],
),
],
),
),
Wrap the part with SingleChildScrollView. and if you are using SingleChildScrollView inside a Column, do not forget to wrap that with Expanded.
example,
Expanded(
child: SingleChildScrollView(
child: Container(
child: yourCustomWidget()
),
),
),
I am making layout for flutter application
What I want to do is
-----------------------
|[i] [text] |
| |
Icon should be the left (padding 5px)
And text should be the center of screen.
At first I should use the Column
However my layout is not the same proportion
It might be simple though , how can I make it??
Stack() is one of the many options that you can use. Something like this:
Stack(
children:<Widget>[
Padding(
padding: EdgeInsets.only(left: 5),
child: Icon(Icons.info),
),
Align(
alignment: Alignment.topCenter,
child: Text("I'm on the top and centered."),
),
],
),
One way you can do this is something like this..
Widget build(BuildContext context) {
return Column(
children: [
Padding(
padding: EdgeInsets.all(5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.info),
Text('text'),
Opacity(opacity: 0, child: Icon(Icons.info)),
],
),
),
Padding(
padding: EdgeInsets.all(5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.info),
Text('second text'),
Opacity(opacity: 0, child: Icon(Icons.info)),
],
),
),
],
);
}
Result:
I might be late, but I want this answer to be there, if some one would find it better for the development purposes in future time.
We can make a reusable widget, which we can use it inside the main widget. The widget will accept text, and icon to be passed when called
// IconData is the data type for the icons
Widget myWidget(String text, IconData icon) => Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
// this will be used a left-padding param
SizedBox(width: 20.0),
// using it here
Icon(icon, size: 28.0, color: Colors.greenAccent),
SizedBox(width: 5.0),
// this will take the remaining space, and then center the child
Expanded(child: Center(child: Text(text)))
]
);
To use in the main Widget, just do like this:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// calling our widget here
myWidget('FirstText', Icons.alarm),
SizedBox(height: 20.0), // this is used as a top margin
myWidget('SecondText', Icons.notifications)
]
)
If you wanna check out the sources which I used, please see:
Expanded class
SizedBox class
The result you will get is this:
This was an answer I gave a while ago for this same issue, but the other situation was vertical (a Column) instead of horizontal (a Row). Just swap the Row and Columns out for a Column and Rows in this example and you'll get the idea.
My code has grey added in order to show the difference between the two approaches.
A Stack will work, but it's overkill for this, this kind of problem is part of why we have Expandeds and Flexibles. The trick is to use three Flexibles (2 Expandeds and a Spacer). Put the Spacer on top. It and the bottom Expanded must have the same flex value in order to center the middle Expanded.
import 'package:flutter/material.dart';
class CenteringOneItemWithAnotherItemInTheColumn extends StatelessWidget {
const CenteringOneItemWithAnotherItemInTheColumn({
Key key,
}) : super(
key: key,
);
/// Adjust these values as needed
final int sameFlexValueTopAndBottom = 40; // 40%
final int middleFlexValue = 20; // 20%
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Column Alignment Question'),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Spacer(),
const Text(
'Cent',
style: TextStyle(
fontSize: 64,
),
),
const Spacer(),
const Text(
'Bot',
style: TextStyle(
fontSize: 64,
),
),
],
),
Column(
children: <Widget>[
/// The key is to have the Spacer and the bottom Expanded
/// use the same value for flex. That will cause the middle
/// child of the Column to be centered vertically.
Expanded(
flex: sameFlexValueTopAndBottom,
child: Container(
width: 100,
color: Colors.grey[300],
),
),
Expanded(
flex: middleFlexValue,
child: const Align(
alignment: Alignment.center,
child: Text(
'Cent',
style: TextStyle(
fontSize: 64,
),
),
),
),
Expanded(
flex: sameFlexValueTopAndBottom,
child: Container(
color: Colors.grey[300],
child: const Align(
alignment: Alignment.bottomCenter,
child: Text(
'Bot',
style: TextStyle(
fontSize: 64,
),
),
),
),
),
],
),
],
),
);
}
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: CircleAvatar(
radius: 40.0,
child: Image.asset('images/pic.jpg'),
),
),
Text(
"michael dub",
),
Text("FLUTTER DEVELOPER"),
Container(
width: 350.0,
height: 70.0,
child: Card(
child: Row(
children: <Widget>[
Icon(
Icons.phone,
),
Text(
"+12-345-678-910",
textAlign: TextAlign.center,
),
],
)))
],
),
),
);
}
}
in your column, try crossAxisAlignment: CrossAxisAlignment.stretch
EDIT:
if you're trying to do what I think you're trying to do, try adding
mainAxisAlignment: MainAxisAlignment.center
to your row
you need to wrap your text widget with Expanded widget. Default Row Widget will not take full width and it is creating issue.
Check out following code.
Expanded(
child: Text(
"+12-345-678-910",
textAlign: TextAlign.center,
),
),
The code I wrote places text in container in the center of the first line and I need it to be in the center of the full square (middle line).
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
textFormfield1('name', Controller),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('Add at 3 images',
textAlign: TextAlign.start,
style: TextStyle(
//color: Colors.grey[400],
fontWeight: FontWeight.bold,
fontSize: 16))
]),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text(text,
textAlign: TextAlign.center),
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.yellow)));
)
),
Pic of what happens and what I need: https://imgur.com/a/FWdjPYX
You should wrap your Text with a Center widget.
Center(
child: Text('Your text')
);
So in your context
Container(
child: Center(
child: Text('Your text')
)
);
Use the alignment attribute of Container widget like - alignment: Alignment.center,
Wrap your Text Widget in a Center Widget.
Center(
child: Text('Your text')
);
You can use Center Widget as a parent of column widget and set the crossAsixAlignment proper to center.
Center(
child: Column(
crossAxisAligment: CrossAxisAligment.center,
children : [
const Text('This is centered'),
]
),
)
I'm getting the problem when I add Scrolling functionality in Scaffold, here I have tried SingleChildScrollView, CustomerScrollView, and ListView but it freezes the UI but when I replaced ti Scaffold to LayoutBuilder it works but all the background my UI got black.
I just want to add scrolling functionally to Scaffold.
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () {
...Some Code...
},
child: Scaffold(
body: Column(
children: <Widget>[
Expanded(
flex: 3,
child: Container(
padding: EdgeInsets.all(15.0),
alignment: Alignment.bottomLeft,
child: Text(
mydata[0][i.toString()],
style: TextStyle(fontSize: 16.0, fontFamily: "Quando"),
),
)),
Expanded(
flex: 6,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
choiceButton('a'),
choiceButton('b'),
choiceButton('c'),
choiceButton('d'),
],
),
)),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.topCenter,
child: Text(showtimer,
style: TextStyle(
fontSize: 35.0,
fontFamily: "Times New Roman",
fontWeight: FontWeight.w700)),
))
],
),
) // Scaffold
);// WillPopScope
}
Try This
return Scaffold(
resizeToAvoidBottomInset: false,
extendBodyBehindAppBar: false,
backgroundColor: Colors.white,
body: Column(
children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
],
),
),
),
),
]
Don't use Expanded inside any scrolling container unless you wrap it in a fixed bound on its main axis.
Like in your case main axis is vertical and you are using expanded in it, since expanded needs a bound to limit its expansion, you should've remove that expanded thing or just wrap the container in a SizedBox for a specific height.
Than you can wrap the sized box in any scroll container which suits you.
Hope it helps!
In your code, change Column to ListView, and remove the expanded widget. you can use fixed height or MediaQuery.of(context).size.height * (any ratio) to the containers, or just don't specify any container height so it'll take its children's height.
here's the code will look like:
body: ListView(
shrinkWrap: true,
children: <Widget>[
Container(
// height: MediaQuery.of(context).size.height * (any ratio) / fixed height
child: Text(
mydata[0][i.toString()],
style: TextStyle(fontSize: 16.0, fontFamily: "Quando"),
),
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
choiceButton('a'),
choiceButton('b'),
choiceButton('c'),
choiceButton('d'),
],
),
),
Container(
alignment: Alignment.topCenter,
child: Text(showtimer,
style: TextStyle(
fontSize: 35.0,
fontFamily: "Times New Roman",
fontWeight: FontWeight.w700)),
)
],
),