I want to add a title or image on the home page of the project, how can I do that? I need help. I want to add an image describing the application above the registration or login form.
#override
Widget build(BuildContext context) {
SizeConfig().init(context);
return Scaffold(
appBar: AppBar(
title: _title(),
),body: Container(
height: double.infinity,
width: double.infinity,
padding: const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_entryField('email', _controllerEmail),
Padding(padding: EdgeInsets.only(bottom: 10)),
_entryField('password', _controllerPassword),
Padding(padding: EdgeInsets.only(bottom: 10)),
_submitButton(),
_loginOrRegisterButton(),
],
),
),
);
}
}
Add items inside Column widget,
#override
Widget build(BuildContext context) {
SizeConfig().init(context);
return Scaffold(
appBar: AppBar(
title: _title(),
),body: Container(
height: double.infinity,
width: double.infinity,
padding: const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset("YourImagePath",height: 100,width:200 ,fit: BoxFit.cover,), //here
_entryField('email', _controllerEmail),
Padding(padding: EdgeInsets.only(bottom: 10)),
_entryField('password', _controllerPassword),
Padding(padding: EdgeInsets.only(bottom: 10)),
_submitButton(),
_loginOrRegisterButton(),
],
),
),
);
}
}
Find more about assets-and-images
You should be able to put an Image widget in your Column, right before the email entryfield. Either an AssetImage or a NetworkImage.
Related
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"),
),
],
),
);
I'm trying to get a header image to show on a page of an app but it's not showing up and the _header seems to be greyed out in my code. I'm missing something I guess that I'm unsure of. Edit: I need the header to show above the rows of content in the build.
Widget _header() {
return new Container(
child: new Row(
children:<Widget>[
new Column(
children: <Widget>[
Image.asset(
'assets/classes-Image.png',
),
],
),
],
),
);
}
Extra code below:
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: const Text('Learn How to Paint'),
backgroundColor: Color(0xFF202945),
),
body: new Container(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Column(
children: <Widget>[
Row(
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(
left: 20.0,
),
),
Image.asset(
'assets/Profile-Photo.png',
),
new Padding(
padding: const EdgeInsets.only(
right: 20.0,
),
),
Text(
'Katherine G.',
),
],
),
],
),
```
You can achieve this by placing your header widget right before the Row widget.
The header is not showing because you didn't add it in the ListView.
I hope this solves your issue.
You need to be calling _header() from somewhere in your build function and give the result as a child to another widget. It being grayed out probably means you're not calling it.
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'),
],
),
)
],
),
),
);
}
}
The current state of my code:
#override
Widget build(BuildContext context) {
return Container(
decoration: Grad2(),
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// ...
],
),
);
}
Which resulted in this beautiful Login page, but there is a problem (Bottom overflowed by 45 pixels when keyboard is up):
So i tried to use the SingleChildScrollView but then it resulted in a blank screen:
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: BoxConstraints().maxHeight),
child: Container(
decoration: Grad2(),
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// ...
],
),
),
),
);
}
But what I've got instead is a white screen. May I know why?
Try this:
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
decoration: Grad2(),
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// ...
],
),
),
);
}
Turns out, I could make the Container the height of the display, which works by setting the height of the Container to MediaQuery.of(context).size.height. In conclusion, use
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
decoration: Grad2(),
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// ...
],
),
),
);
}
I want to align the children widgets of my Column to the center of the cross axis.
I tried to do this using the crossAxisAlignment property of Column however its not working. How can i fix this?
#override Widget build(BuildContext context) {
Container buttonView = Container(
padding: EdgeInsets.only(top: 30.0, left: 35.0, right: 35.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
DropdownButton<String>(
...
),
SizedBox(height: 20.0),
DropdownButton<String>(
...
],
));
return Scaffold(
body: buttonView,
);
}
you should try mainAxisAlignment: MainAxisAlignment.center, below is snap,
#override Widget build(BuildContext context) {
Container buttonView = Container(
padding: EdgeInsets.only(top: 30.0, left: 35.0, right: 35.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, // <---- try this property
children: <Widget>[
DropdownButton<String>(
...
),
SizedBox(height: 20.0),
DropdownButton<String>(
...
],
));
return Scaffold(
body: buttonView,
);
}