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: [
// ...
],
),
),
);
}
Related
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.
I am trying to align column with text to far right side of the window but somehow its not happening.
Tried with MainAxisAlignment.right , CrossAxisAlignment.right but somehow nothing is working out for me. Below is my Dart code,
class MVTHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
return Scaffold(
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: 550,
width: width,
child: Row(
children: [
Lottie.network(
'https://assets2.lottiefiles.com/datafiles/6WfDdm3ooQTEs1L/data.json'),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Multivariate Testing"),
Text('Run experiments to make key flows more effective.'),
// ignore: deprecated_member_use
TextButton(
onPressed: () {}, child: Text('Create Experiment')),
],
),
],
),
),
Container(
height: height,
width: width,
color: Colors.blueAccent,
)
],
),
));
}
}
I am seeing this in the output
While you are using the Row widget,
Add mainAxisAlignment: MainAxisAlignment.spaceBetween to it.
So your code should be like this
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, // <-- Add this
children: [
Lottie.network(
When your Row's children are being rendered, by giving it MainAxisAlignment.spaceBetween, we are essentially telling the Row to place its children as far apart from each other as possible.
In the case of 2 children, it means 1 child to the extreme left and other to the extreme right.
I have a chat bubble with username, timestamp and chat message. It is divided into two rows.
First row is username and timestamp, second row is the chat message.
With the code below it looks like this:
I want the timestamp to be aligned right but the blue box should not be wider then the message line except the message is shorter than username and timestamp.
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Username"),
Container(
color: Colors.red,
child: Text("5 mins ago"),
),
],
),
Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width - 120),
child: Text("A long message text 123456789")),
],
))
]);
}
}
Try this:
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text("Username"),
Spacer(),
Container(
color: Colors.red,
child: Text("5 mins ago"),
),
],
),
This will solve your problem.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Colors.blue,
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Username"),
Container(
color: Colors.red,
child: Text("5 mins ago"),
),
],
),
Text("A long message text 123456789"),
],
),
)
],
);
}
}
I am trying to build a view as in the image below.
The tweet your reply is just stack at the bottom while the other stuff are scrollable.
I've been banging my head on how to achieve this for a couple of hours.
Exactly;y like in the image below. There are four sections:
The post (tweet)
The row of icons
The comments (which scrolls)
The tweet your reply which is static
The solution would be to use the Align Widget. So in your Stack you would put as the last element in the stack:
Align(
alignment: Alignment.bottomCenter,
child: // your widget would go here
),
I'm judging by your question that you have figured out how to do all of the other parts, and was just wondering about the bottom part. You can use Align to align things in other ways as well (such as topCenter, bottomLeft, etc). Hope this helps, and if so please up vote and accept as answer and if not leave a comment below.
Edit:
I wouldn't use a Stack. I would wrap the entire widget tree in a Column, and put the post in a Expanded Widget with a flex factor of 1, and a Row of Icons below it. Then put a ListView in an Expanded Widget with a flex of 4 (you can experiment with values). And lastly in the Column I would add you "Tweet you reply" Widget.
Simple layout code to give you an idea of how to implement it:
Column(
children: <Widget>[
Expanded(
child: ListView(
shrinkWrap: true,
children: <Widget>[
//your post
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
// your icons
],
),
//your comments
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: // you textField,
),
],
)
Try this
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(50),
child: Center(
child: Text(
"A POST"
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.details),
Icon(Icons.print),
Icon(Icons.translate),
Icon(Icons.map)
],
),
Expanded(
child: ListView(
children: List.generate(10, (index) => ListTile(title: Text("Comment $index"),)),
),
)
],
),
),
TextField(
decoration: InputDecoration(
labelText: "Tweet your reply"
),
)
],
),
),
);
}
}
The output:
If you want the post to scroll with it, this should help
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(50),
child: Center(
child: Text(
"A POST"
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.details),
Icon(Icons.print),
Icon(Icons.translate),
Icon(Icons.map)
],
),
Column(
children: List.generate(10, (index) => ListTile(title: Text("Comment $index"),)),
)
],
),
),
),
TextField(
decoration: InputDecoration(
labelText: "Tweet your reply"
),
)
],
),
),
);
}
}
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,
);
}