The content inside the column didnt go center,i dont want to use center widget all i want is to make the widget list go center
class Body extends StatelessWidget {
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
// == size provide height and width from screen
return Background(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Welcome to my App",
style: TextStyle(fontWeight: FontWeight.bold, color: kPrimaryColor,),
),
SvgPicture.asset(
"assets/icons/chat.svg",
height: size.height * 0.45,
),
FlatButton(
onPressed: (){},
child: Text("LOGIN", style: TextStyle(color: Colors.white),),
color: kPrimaryColor,
padding: EdgeInsets.symmetric(vertical: 20,horizontal: 40),
)
],
),
);
}
}
This will help you.
Column(
mainAxisAlignment:MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('text'),],
)
Or try with a list view
Scaffold(
appBar: new AppBar(),
body: Center(
child: new ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(20.0),
children: [
Center(child: new Text('your content'))
]
),
),
);
Or you can use the Align widget
return Scaffold(
body: ListView( // your ListView
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: _button("Left"),
),
Align(
alignment: Alignment.center,
child: _button("Middle"),
),
Align(
alignment: Alignment.centerRight,
child: _button("Right"),
),
],
),
);
Related
import 'package:flutter/material.dart';
void main() => runApp(HomePage());
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Home"),
),
body: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
children: [
Container(
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
ButtonBar(
children: <Widget>[
FlatButton(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Center(
child: Text(
"ljsdgnvsdnv",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18),
),
),
Text(
"sljdvnldnvsdb",
style: TextStyle(fontSize: 15),
),
],
),
height: 60,
width: 600,
color: Colors.orange,
),
onPressed: () {
print("Buton");
},
),
],
)
],
),
),
],
),
),
);
}
}
I can't set the height of my containers after some limit(also the widht of the second container), it doesn't give any errors but at the same time it doesn't change it's height. In flutter inspector their height and widht values are the values which are I assigned but it doesn't look like it. What should I do? (Text are random)
I just tried your code and didn't find any error while running it. But if the error that you are talking about are linked with the size of the container and some limit that you have added, than it's because you are trying to create an widget bigger than the zone that contain the widget.
You should check the limit that you have by trying:
mainAxisSize: MainAxisSize.max,
And than you could give value that are within the zone.
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,
),
),
Hello I am new on flutter and I am currently working on a design which I saw but the problem is that I am having issue on putting the Icon on the right side and the Row is not same size as others. I hope you can help me so it will broaden my knowledge on this flutter. I just started Flutter this week.
Design intended :
Current work :
Code :
#override
Widget build(BuildContext context) {
// TODO: implement build
Widget titleText = Container(
padding: const EdgeInsets.all(32),
child: Center(
child: Text('Select Screen Lock',style: TextStyle(fontSize: 32.0,fontWeight: FontWeight.bold),),
)
);
Widget subTitleText = Container(
padding: const EdgeInsets.all(32),
child: Center(
child: Text('Secure your phone with a screen lock style,',style: TextStyle(fontSize: 16,fontWeight: FontWeight.normal),),
),
);
Widget selectionContainer = Container(
width: 200,
child: IntrinsicWidth(
child: Column(
children: <Widget>[
_selectMenu('Password'),
_selectMenu('Pin Code'),
_selectMenu('Finger Print')
],
),
)
);
return MaterialApp(
home: Scaffold(
body: ListView(
children: <Widget>[
titleText,
subTitleText,
Center(
child:
selectionContainer,
)
],
),
),
);
}
Column _selectMenu(String title){
return Column(
children: <Widget>[
Row(
children: <Widget>[
Text(title), Icon(
Icons.arrow_forward_ios,
color: Colors.grey,
size: 16,
)
],
)
],
);
}
Problem here:
Column _selectMenu(String title){
return Column(
children: <Widget>[
Row(
children: <Widget>[
Text(title), Icon(
Icons.arrow_forward_ios,
color: Colors.grey,
size: 16,
)
],
)
],
);
First of all, remove Column(why we need it here?), and add space between items(please check mainAxisAlignment and crossAxisAlignment), then we get
Widget _selectMenu(String title){
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(title), Icon(
Icons.arrow_forward_ios,
color: Colors.grey,
size: 16,
)
]);
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)),
)
],
),
I am trying to extract re-use a simple widget that is then referenced in parent widget. The custom widget simply uses a row to layout a textField and a button, and below this I Want to have a listview showing items. I then embed in the customwidget in parent, but it continually throws Error. I have not figured out how to get the custom widget working where I can use ListView or column layout inside. Below is the 2 simplified widgets that demo the issue.
Here is the parent widget, which is where I call the custom widget PlayListControl()
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Playlists'),
),
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: <Widget>[
Container(
alignment: Alignment.center,
margin: EdgeInsets.all(20),
child: Text('Test'),
),
PlayListControl(),
],
),
),
drawer: SideDrawer(),
);
}
}
And here is the playlistcontrol widget.
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200,
child: TextField(),
),
ButtonTheme(
minWidth: 30,
child: RaisedButton(
textColor: Colors.white,
child: Text('add'),
onPressed: () {},
)),
],
),
),
Expanded(
child: ListView(
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
],
),
)
],
),
);
}
}
No matter what I try, it always complains about layout issue related to height. I would have thought wrapping the ListView in Expanded would solve the issue, but it doesn't. Only if I use a container and specify height do I not get the errors, but I want to use whatever available space there is.
How can I get this playlistcontrol() widget to properly render inside a parent control?
you forgot to wrap the first container of PlayListControl in Expanded widget..
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('My Playlists'),
),
body: Container(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: <Widget>[
Container(
alignment: Alignment.center,
margin: EdgeInsets.all(20),
child: Text('Test'),
),
PlayListControl(),
],
),
),
));
}
}
class PlayListControl extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200,
child: TextField(),
),
ButtonTheme(
minWidth: 30,
child: RaisedButton(
textColor: Colors.white,
child: Text('add'),
onPressed: () {},
)),
],
),
),
Expanded(
child: ListView(
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
],
),
)
],
),
),
);
}
}