Flutter CustomScrollView „stick“ card on top - flutter

I want to create a list in Flutter with a small preview of the content before the user sees all information on a new screen.
Therefor I build a simple list with Sliver-Cards:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Cards'),
backgroundColor: Colors.blue,
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: CustomScrollView(
shrinkWrap: false,
slivers: <Widget>[
_buildHeader(),
_buildCard('1', Colors.white, Colors.red, Colors.transparent),
_buildCard('2', Colors.white, Colors.blue, Colors.red),
_buildCard('3', Colors.white, Colors.green, Colors.blue),
…
],
),
),
);
}
Widget _buildHeader() => SliverStickyHeader(
header: Container(
height: 50,
color: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 16),
alignment: Alignment.topLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Center(
child: Text(
"Card-Header",
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
),
],
),
),
sliver: SliverToBoxAdapter(
child: Container(
height: 20,
),
),
);
Widget _buildCard(
String logo, Color logoColor, Color cardColor, Color prevColor) =>
SliverStickyHeader(
header: GestureDetector(
child: Stack(
children: <Widget>[
Container(
height: 16,
color: prevColor,
),
Container(
height: 60,
decoration: BoxDecoration(
color: cardColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16))),
padding: const EdgeInsets.symmetric(horizontal: 16),
alignment: Alignment.bottomLeft,
child: Text(
logo,
style:
TextStyle(color: logoColor, fontWeight: FontWeight.bold),
),
),
],
),
),
sliver: SliverToBoxAdapter(
child: Container(
height: 20,
color: cardColor,
),
),
);
Here’s a Screenshot:
The only thing missing is the method to show a small preview of the content, which I want to stick to the top of the list. For example, anything like in this GitHub post: https://github.com/loopeer/CardStackView/blob/master/screenshot/screenshot1.gif
Is it possible to create a method like this in flutter?

Related

Flutter UI Place button on the edge of two containers

How to create an UI like above just the part where the Edit Profile button is on the edge of both the containers ? I used stack and positioned but didnt work out for me . Can somebody help me with this . How to approach this .
try this code no perfect but it will give you some idea
Container(
height: double.infinity,
width: double.infinity,
color: Colors.red,
child: Stack(children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
height: 300.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white,
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 8.0,
offset: Offset(0.0, 5.0),
),
],
),
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(top: 15.0, bottom: 15.0),
child: Column(
children: <Widget>[
const SizedBox(
height: 30.0,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text(
'Year',
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
),
),
Text(
'Sophmor',
style: TextStyle(
fontSize: 34.0,
color: Colors.black87,
fontFamily: ''),
),
],
),
],
),
)
],
)),
),
Container(
width: 80,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
borderRadius: BorderRadius.circular(15.0), ),
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Center(
child: Container(
child: const Text('Edit Profile'),
),
),
),
),
],
),
),
]),
);
Instead of using Stack you can use Transform.translate to shift the TextButton up by the half of its height:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: const Text('Material App Bar'),
),
body: Column(
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.bottomCenter,
color: Color(0xFFF09384),
),
),
Expanded(
flex: 3,
child: Container(
alignment: Alignment.topCenter,
color: Color(0xFF3E8C92),
child: Column(
children: [
Transform.translate(
offset: Offset(0,-35/2), // Here you insert the half of the button height
child: TextButton(
onPressed: () => print("Hello"),
child: Text("Edit Profile"),
style: TextButton.styleFrom(
fixedSize: Size(120, 35), // Here you should fix the size of the button
backgroundColor: Colors.white,
primary: Color(0xFF3E8C92),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
)
),
),
),
...List<Text>.filled(5, Text("Data"))
]
),
),
),
],
)
),
);
}
}

Alignment issues with Stack flutter

I have design that shows flash offers count but when i tried to design like the following image the alignment of widgets do not work properly. How do i approach this design? I have tried many codes but i am not getting the desired results.
The design i am trying to create
The design i did so far
Code
Widget FlashOffers(){
return GestureDetector(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlashOfferListScreen(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
height: 50,
width:350,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))
),
),
Center(child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Flash Offers",style: TextStyle(fontSize: 18,color: Colors.white,fontWeight: FontWeight.bold),),
)),
Row(
// crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Stack(
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3")
],
),
],),
],
),
),
);
}
Try this: Remove your row widget and add alignment: Alignment.center to stack that is in the row. Wrap you Stack with Align Widget and add alignment: Alignment.centerRight
Widget flashOffers() {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
height: 50,
width: 350,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))),
),
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Flash Offers",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
)),
Align(
alignment: Alignment.centerRight,
child: Stack(
alignment: Alignment.center,
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3")
],
),
),
],
),
),
);
}
You should consider adding the label and counter icon inside the container widget.
Your code should look something like this:
Widget flashOffers() {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlashOfferListScreen(),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 50,
width: 350,
padding: EdgeInsets.symmetric(horizontal: 16),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(15))),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
child: Text(
"Flash Offers",
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
),
Stack(
alignment: Alignment.center,
children: [
SvgPicture.asset("assets/images/YELLOW.svg"),
Text("3"),
],
)
],
),
),
),
);
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: Center(
child: flashOffers(),
),
),
),
);
}
Widget flashOffers() {
return GestureDetector(
onTap: () {
print('new route push');
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 350,
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFc1202e),
Color(0xFFea2127),
],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
borderRadius: BorderRadius.all(
Radius.circular(30),
),
boxShadow: [
BoxShadow(
blurRadius: 10,
offset: Offset(-10, 10),
color: Colors.black26,
),
]),
child: Row(
children: [
Expanded(
child: Text(
"Flash Offers".toUpperCase(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Stack(
alignment: Alignment.center,
children: [
Icon(
Icons.folder,
size: 30,
color: Colors.yellowAccent,
),
Text(
'3',
style: TextStyle(color: Colors.red),
),
],
),
SizedBox(width: 10),
],
),
),
),
);
}
}
Here is the example without using Stack. Hope you will get the idea and it will help :-)
return MaterialButton(elevation: 8,
color: Colors.redAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0)
),
child: Row(children: [
Expanded(child: Text('FLASH OFFER', textAlign: TextAlign.center)),
CircleAvatar(
backgroundColor: Colors.yellow, radius: 12, child: Text("2"))
]),
onPressed: () {
print('button pressed');
});
Edit: To show the shadow, use the elevation property of button. You can also change the shadow color
You can use positioned,it is so useful in stack widget.
Look at this:
https://medium.com/codespace69/flutter-widget-positioning-eca4fea1528b#:~:text=A%20Stack%20allows%20you%20to,the%20children%20of%20a%20stack.
Try this
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
),
child: FlatButton(
splashColor: iconButton,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadiusDirectional.circular(20)),
color: primaryColor,
onPressed: () {
sendMail();
},
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(),
Text(
"Send",
style: styleText(
size: 20,
weight: FontWeight.bold,
color: white),
),
Container(
child: Center(
child: SvgPicture.asset(
ic_profileWhite,
height: 20,
width: 20,
),
),
),
],
),
),
),
),

Flutter: How to align textfield to bottom center in a column?

I am building a chat app.
I have 2 items on the column. First one is information card which is on top of page,
I also have a textfield but I cant figure out how to place it on bottom center.
Here is the main code with the problem:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: true,
appBar: userMessageChatAppBar(context),
body: SingleChildScrollView(
child: Column(
children: [
userMessageChatInformationCard(context),
Positioned(
bottom: 20,
child: userMessageChatTextField())
],
),
),
);
TextField where chatting will occur:
Padding userMessageChatTextField() {
return Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(
suffixIcon: RaisedButton.icon(
onPressed: () {},
icon: Icon(
Icons.send,
color: Colors.white,
),
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))),
label: Text(
"19.99₺",
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
hintText: "Bir şeyler yaz",
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.teal)),
)),
);}
Information Card where user first sees:
Align userMessageChatInformationCard(BuildContext context) {
return Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
decoration: new BoxDecoration(
boxShadow: [
new BoxShadow(
color: Colors.grey,
blurRadius: 10.0,
),
],
),
child: Card(
clipBehavior: Clip.antiAlias,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'fernando muslera mesajını bekliyor',textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0, color: Colors.blueGrey),
),
),
Padding(
padding: const EdgeInsets.only(left: 20,right: 20,bottom: 20),
child: Text(
'280 karakterlik mesaj için ödeme yaparsın ünlünün mesajı alabilmesi uzun sürebilir',
textAlign: TextAlign.center, style: TextStyle(
color: Colors.black.withOpacity(0.6)),
),
),
],
),
),
)));
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: true,
appBar: userMessageChatAppBar(context),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
userMessageChatInformationCard(context),
userMessageChatTextField()
],
),
);
}

Keyboard hides TextField - Flutter

I've made a chat page that contains the header, a MessagesStream and a Row that includes the TextField and RaisedButton. I've checked every single page there is about this issue, both in GitHub and StackOverflow, but I wasn't able to find any solution. The row does not go up when the keyboard is launched, instead it goes over the bottom part of the screen, hiding everything.
Could anyone please help me figure this out? I've literally tried everything.
This is my Scaffold:
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Colors.lightGreenAccent,
appBar: new AppBar(
backgroundColor: Colors.lightGreenAccent,
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
centerTitle: true,
title: Image(
image: iconApp,
height: 50,
width: 50,
),
),
body: SafeArea(
child: Column(
children: <Widget>[
SizedBox(height: 10),
Expanded(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Material(
borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0)),
color: grayWhite,
elevation: 2,
child: Padding(
padding: const EdgeInsets.only(bottom:10),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10.0, left: 15),
child: CircleAvatar(
child: Image.network(
),
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10, left: 15),
child: Text(
"Test",
style: TextStyle(
color: Colors.black54,
fontSize: 20
),
),
),
Padding(
padding: const EdgeInsets.only(top: 3, left: 15),
child: Text(
"Test2",
style: TextStyle(
color: Colors.black54,
fontSize: 15
),
),
),
Container(
height: 1,
color: Colors.white70,
)
],
),
)
],
),
),
),
MensagensStream(),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
controller: textEditingController,
autofocus: true,
autocorrect: true,
onChanged: (value) {
mensagem = value;
},
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Digite a sua mensagem..."
),
),
),
),
ButtonTheme(
height: 55,
minWidth: 10,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
100,
)
),
color: Colors.lightGreenAccent,
child: Icon(Icons.send, color: Colors.white),
onPressed: () => {
textEditingController.clear(),
firestore.collection('mensagens').add({
'Mensagem': mensagem,
'Remetente': googleEmail,
'Destinatario': "patio#teste.com",
'DataHorario': FieldValue.serverTimestamp(),
})
},
),
),
],
)
],
),
),
)
],
),
),
),
);
}
}```
Wrap either one of you Columns (probably the outer one) with a SingleChildScrollView. The issue is that simply popping up the keyboard doesn't suddenly tell the layout that it needs to be able to scroll. You have explicitly say you want it to be able to scroll.
See this for more information on the SingleChildScrollView.
You can use a Scaffold and place the text field as bottomSheet

MainAxisAlignment under SingleChildScrollView is not working

I developed a login screen in which first i get the render flex error when i open the keyboard so for that i wrap my widgets in SingleChildScrollView, but after that mainAxisAlignment of Column is not working but when i removed SingleChildScrollView then everything working fine except render flex error. i don't know what to do kindly help please.
Following is the code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class LoginScreenOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
color: Colors.blue,
),
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(top: 70, left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.keyboard_arrow_up,
size: 30,
color: Colors.white,
),
Text(
"Login Screen",
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold),
),
],
),
),
),
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 50, left: 20),
child: Text(
"Welcome",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
decoration: InputDecoration(
icon: Icon(Icons.email),
hintText: "Enter User Name"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
obscureText: true,
decoration: InputDecoration(
icon: Icon(Icons.vpn_key),
hintText: "Enter Password"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(width: 2, color: Colors.blue)),
textColor: Colors.blue,
child: Text(
"Sign In",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16),
),
onPressed: () {},
),
),
),
Center(
child: Text(
"Forgot Password",
style: TextStyle(color: Colors.grey),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
child: Text("Create Account"),
color: Colors.blue,
onPressed: () {},
),
),
)
],
),
)
],
),
),
],
),
));
}
}
You can try this code blocks
CustomScrollView(
scrollDirection: Axis.vertical,
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('test'),
for (int i = 0; i < 10; i++) const FlutterLogo(size: 80)
],
),
),
],
),
After wrapping Column with SingleChildScrollView wrap it with Center widget.
Set the alignment of the outer container, then wrap the column with singleChildScrollView.
Container(
alignment: Alignment.center, //Set container alignment then wrap the column with singleChildScrollView
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: []
),
);
Yeah MainAxisAlignment' property of a 'Column' does not work when you wrap the 'Column' in 'SingleChildScrollView'. I dont know the reason, but thats how it is.
I use 'SizedBox(height: xx)' to give space between widgets inside the 'Column' when i absolutely need a scroll view, otherwise i tend not to use the 'SingleChildScrollView'.
you can Column wrap with a Container...
full code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class LoginScreenOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
color: Colors.blue,
),
SingleChildScrollView(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(top: 70, left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.keyboard_arrow_up,
size: 30,
color: Colors.white,
),
Text(
"Login Screen",
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold),
),
],
),
),
),
),
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 50, left: 20),
child: Text(
"Welcome",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
decoration: InputDecoration(
icon: Icon(Icons.email),
hintText: "Enter User Name"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
obscureText: true,
decoration: InputDecoration(
icon: Icon(Icons.vpn_key),
hintText: "Enter Password"),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(width: 2, color: Colors.blue)),
textColor: Colors.blue,
child: Text(
"Sign In",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16),
),
onPressed: () {},
),
),
),
Center(
child: Text(
"Forgot Password",
style: TextStyle(color: Colors.grey),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: double.infinity,
height: 50,
child: FlatButton(
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
child: Text("Create Account"),
color: Colors.blue,
onPressed: () {},
),
),
)
],
),
)
],
),
),
],
),
));
}
}
This will work...
Set the alignment of the outer container as alignment.bottomCenter, then wrap the column with singleChildScrollView. It will definitely works. Thankyou.