Width of container is not working inside SliverToBoxAdapter in CustomScrollView - flutter

I have a CustomScrollView contains a SliverToBoxAdapter.I gave width as MediaQuery.of(context).size.width / 1.75.But it takes full width of screen .
enter image description here.
Width of container is working if it is placed outside of Customscrollview.
class ProfileView extends GetView<ProfileController> {
const ProfileView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Row(children: [
Expanded(
child: CustomScrollView(
shrinkWrap: true,
slivers: [
SliverToBoxAdapter(
child: Padding(
padding:
const EdgeInsets.only(top: 40.0, left: 45),
child: Container(
padding: EdgeInsets.only(top: 30),
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border:
Border.all(color: Colors.red, width: 0.7),
color: Color(0xfffbfbfa),
),
child: Stack(
children: [
Positioned(
right: 0,
top: 0,
child: Align(
alignment: Alignment.topRight,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: Padding(
padding: const EdgeInsets.only(
right: 18.0),
child: Text(
"Edit",
textAlign: TextAlign.left,
style: GoogleFonts.inter(
color: AppColors.primaryColor,
fontSize: 13,
letterSpacing:
0
,
fontWeight: FontWeight.w400,
height: 1.5769230769230769),
),
),
),
),
),
Text("Text"),
],
),
),
),
)
],
),
)
])
);
}

you have to wrap your container with Align widget like this:
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(top: 40.0, left: 45),
child: Align(
alignment: Alignment.center,
child: Container(
padding: const EdgeInsets.only(top: 30),
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 0.7),
color: Colors.amber,
),
....

Related

how to add a UI Search bar in a stack flutter

how can I add my search bar in a different stack in my code? without creating a widget. here's my home. dart file. as you can see I have added a search bar in a different widget at the end of the code. please help me to add this same code in a stack. if it is not possible suggest me another way to do this.
home.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget{
#override
_HomePageState createState() => _HomePageState();}
class _HomePageState extends State <HomePage>{
#override
Widget build (BuildContext context){
return Scaffold(
backgroundColor: Color(0xffEDEFF4),
body: Padding(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),//padding for search bar
child: ListView (
children: [
buildSearchInput(), //searchbar
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Banana",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/banana.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Tangerine",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/orange.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Kiwi",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/kiwi.png"),
),
),
],
),
],
),
),
);
}
//search bar
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(14)),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey.shade300,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
}
Add it by wrapping it inside Positioned() widget, specifying top, left [and right] padding values.
For it to be visible, insert it as the last item in stack, that way it will be the topmost one on Z axis.
By specifying top,left [and right] values close to 0, it will appear on top and above all other widgets in the stack.

automatic height of the container in the flutter

I wrote a page, at the top everything is fine, as it should be. And at the bottom I have a history of events. The width of my container is determined automatically (depending on the width of the screen), and the height - no, on different devices different heights (indents at the bottom are different). Is it possible to determine the height automatically (to the end of the screen) ?? Also, I'd like to add a scroll bar at the bottom for this container so that when events appear there, I can scroll through them both bottom and top. I will be grateful for your help.
My page:
My code:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
color:Colors.white12
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Column(
children: <Widget>[
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('yes',textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
),
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('no',textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
)
],
),
SizedBox(height: 15.0),
Container(
child: Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0,color: Colors.blueGrey)),
padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
),
Container(
child: Text("weight", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
padding: EdgeInsets.only(top: 2, bottom:40, left:0, right:0),
),
Center(
child: Container(
alignment: Alignment.center,
width: double.infinity,
height: 430,
decoration: BoxDecoration(
border: Border.all(
width: 1.5
),
borderRadius: BorderRadius.circular(25)
),
child: new Column(
children: [
Container(
child: Text("history events", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)
),
],
),
)//Container
)
]
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_scanQR();
});
},
child: const Icon(Icons.qr_code),
backgroundColor: Colors.pink,
),
);
}
My scrin (after updating the code)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: <Widget>[
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('yes', textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
),
FlatButton(
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('no', textScaleFactor: 2.5),
onPressed: null,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
)
],
),
SizedBox(height: 15.0),
Container(
child: Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0, color: Colors.blueGrey)),
padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
),
Container(
child: Text("weight", style: TextStyle(fontSize: 20.0, color: Colors.blueGrey)),
padding: EdgeInsets.only(top: 2, bottom: 40, left: 0, right: 0),
),
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(7, 0, 7, 7),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(border: Border.all(width: 1.5), borderRadius: BorderRadius.circular(25)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 45,
child: Text("history events", style: TextStyle(fontSize: 25.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
Expanded(
child: Scrollbar(
child: new ListView(
shrinkWrap: true,
children: [
Container(
child: Text("Event 1", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 200,
),
Container(
child: Text("Event 2", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 200,
),
Container(
child: Text("Event 3", style: TextStyle(fontSize: 50.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
SizedBox(
height: 50,
),
],
))),
],
))))
]),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
// _scanQR();
});
},
child: const Icon(Icons.qr_code),
backgroundColor: Colors.pink,
),
);
}
You can alter the responsive height or width by using Media Query .To do that you need to wrap your Scaffold with Material App or Cupetino App which allows you to use MediaQuery .
void main() {
runApp(MaterialApp(home: MyApp()));
}
To make the list scrollable simply you can use ListView.builder
Center(
child: Container(
margin: new EdgeInsets.only(bottom: 20,right: 15,left: 15),
alignment: Alignment.center,
width: double.infinity,
height: MediaQuery.of(context).size.height/1.5,
decoration: BoxDecoration(
border: Border.all(width: 1.5),
borderRadius: BorderRadius.circular(25)),
child: new Column(
children: [
Container(
child: Text("history events",
style: TextStyle(
fontSize: 20.0, color: Colors.blueGrey)),
padding: EdgeInsets.all(2.0)),
],
),
) //Container
)
I added a little margin to make it looks better.Ofcourse you can also use MediaQuery for margin or padding if you want to.
https://i.stack.imgur.com/W6oXd.png

How to push down the listview without making the draggablescrollablesheet unscrollable?

I am running into issues pushing down the listview out of view of the draggablescrollablesheet (sheet) while still being able to scroll the sheet. So in simpler words I do not want the blue container to show up when the sheet is at the bottom.
I have tried to edit the height of the listview container and that makes it go offscreen therefore unscrollable.
I have also tried wrapping the sheet in a singlechildscrollview with no luck. I am trying to avoid using a button at all possible costs!
import 'package:flutter/material.dart';
import 'package:photosgroup2/chat/message_model.dart';
import 'package:photosgroup2/chat/user_model.dart';
class FeedTest extends StatefulWidget {
FeedTest({Key key}) : super(key: key);
#override
_FeedTest createState() => _FeedTest();
}
class _FeedTest extends State<FeedTest> {
_buildMessage(
Message message,
User user,
) {
//Reply reply){
String time= message.time;
return Container(
// color: Colors.yellow,
child: Padding(
padding: EdgeInsets.only(left: 0), //5
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 5 ,top: 3.5), //10
child: new CircleAvatar(
radius: (17.5),
backgroundImage: AssetImage(
user.profilePic,
),
),
),
SizedBox(
width: 5,
),
Container(
//width: MediaQuery.of(context).size.width,
// width: 300,
child: Material(
color:Color(0x00000000) , //TRANSPARENT
//color: const Color(0xf2ffffff),
///Color(0xe6ffffff) // ! REVISIT Change color of boxes???
/*borderRadius: BorderRadius.only(
topRight: Radius.circular(16.0),
bottomRight: Radius.circular(16.0),
bottomLeft: Radius.circular(16.0),
),*/
child: Padding(
padding: EdgeInsets.only(
left: 10.0), //Revisit
child: Column(
//mainAxisSize: MainAxisSize.min,
mainAxisSize: MainAxisSize.min,
//crossAxis
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 5,
),
Text(
user.name,
style: TextStyle(
fontFamily: 'Lato-Bold',
fontSize: 13 ,
color: const Color(0xd9343f4b),
),
textAlign: TextAlign.left,
),
SizedBox(width: 8),
Padding(
padding: const EdgeInsets.only(left:8.0),
child: Text(
'$time hours ago',
style: TextStyle(
fontFamily: 'Lato',
fontSize: 12 ,
color: const Color(0xff5a6978),
),
textAlign: TextAlign.left,
),
),
SizedBox(
height: 5,
),
//SizedBox(height: 10,),//if(message.imageUrl!='') {
//hasReplies(message, user, reply)
//},
//}
],
),
),
),
),
],
),
SizedBox(height:5),
Container(
//color:Colors.blue,
//: EdgeInsets.only(right:10
//right: 10 * SizeConfig.widthRatio,
//),
child: Container(
//color: Colors.green,
margin: EdgeInsets.only(left:5,right:15),
child: Text(
message.text,
style: TextStyle(
fontFamily: 'Lato',
fontSize: 13 ,
color: const Color(0xff5a6978),
height: 1.5384615384615385
),
textAlign: TextAlign.left,
),
),
),
SizedBox(//color:Colors.amber,
height:15),
Transform.translate(
offset: Offset(-6,0),
child: Container(
width: 350.0,
height: 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1.0),
color: const Color(0x40343f4b),
),
),
),
SizedBox(//color:Colors.amber,
height:5),
],
),
),
);
}
#override
Widget build(BuildContext context) {
// visibility of reply button in top right corner
return Scaffold(
backgroundColor: const Color(0xfffafafa),
body: SafeArea(
bottom: false,
top: false,
child: //Column(
//mainAxisAlignment: MainAxisAlignment.spaceAround,
//children: <Widget>[
Stack(
children: <Widget>[
DraggableScrollableSheet(
initialChildSize: 0.068,
minChildSize: 0.068,
maxChildSize: 0.71,
builder: (context, scrollController) {
return Container(
//padding: EdgeInsets.symmetric(horizontal: 20),
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(32),
topRight: Radius.circular(32),
),
child: Container(
width: 375, //screen width
height: 812 * 0.71, //screen height *
color: Color(0xffdfdfdf),
),
),
),
Stack(
children: [
Padding(
padding: const EdgeInsets.only(left: 10, top: 20.0),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(27.5),
topRight: Radius.circular(27.5),
),
child: Container(
//margin: EdgeInsets.only(),
width:340,
//height: 515,
color: Colors.yellow,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(27.5),
topRight: Radius.circular(27.5),),
child: Container(
// padding: EdgeInsets.only(top:40),
color: Colors.blue,
child: ListView.builder(
//reverse: true,
controller: scrollController,
itemCount: comments.length,
itemBuilder: (BuildContext context, int index) {
final User messenger = comments[index].sender;
final Message message = comments[index];
//final Reply reply = replies[index];
return Column(children: <Widget>[
_buildMessage(
message,
messenger,
), //reply),
SizedBox(
height: 8,
) // !COME BACK TO SPACE BETWEEN
]);
},
),
),
),
),),
),
],
),
Stack(
children: <Widget>[
//67
Padding(
padding: EdgeInsets.only(left: 141, top: 6),
child: SizedBox(
width: 93.0,
height: 29.0,
child: Stack(
children: <Widget>[
SizedBox(
width: 93.0,
height: 29.0,
child: Stack(
children: <Widget>[
// Adobe XD layer: 'Rectangle' (shape)
Container(
width: 93,
height: 29.0,
child: Padding(
padding: EdgeInsets.only(
left: 1, top: 6),
child: Text(
'Place Holder',
style: TextStyle(
fontFamily: 'Lato',
fontSize: 12,
color: const Color(0xffffffff),
),
textAlign: TextAlign.center,
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(27.5),
color: const Color(0xf2343f4b),
),
),
],
),
),
],
),
),
),
],
),
],
),
);
},
),
],
),
// ],
//),
),
);
}
}

How to stack items on top of each other?

i'm trying make a widget like image below.
Mindset of me is stack item into listview. The items are stacked. But when nesting a stack into listview, the stack needs to be wrapped in a fixed widget. If you remove the listview, you cannot make it into the list as in the picture. First time there is nothing wrong to expect people to ignore.
I hope to get the answer. Thanks.
body: Container(
color: Colors.white,
width: double.infinity,
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Positioned(top: 10,child: card1(),),
Positioned(bottom: 10,child: card1(),),
],
),
),
),
Item
static Widget card1() {
return Card(
elevation: 0,
child: Container(
margin: EdgeInsets.only(top: 100),
width: double.infinity,
padding: EdgeInsets.only(top: 18, left: 18),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(offset: Offset(0, 8), blurRadius: 8, spreadRadius: 0),
],
),
child: Stack(
children: <Widget>[
Container(
width: 343,
height: 196,
child: SvgPicture.asset(
"assets/bg.svg",
),
),
Container(
padding: EdgeInsets.only(
top: 24,
left: 24,
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10),
child: Text("Vietcombank"),
),
],
),
),
],
),
),
);
}
I created StackedListTile, you can try it (Demo here DartPad)
import 'package:flutter/material.dart';
class StackedListTile extends StatelessWidget {
final Color color;
final String title;
final ImageProvider iconImage;
const StackedListTile({
Key key,
#required this.color,
#required this.title,
#required this.iconImage,
}) : assert(color != null),
super(key: key);
#override
Widget build(BuildContext context) {
return SizedBox(
height: 90.0,
child: Stack(
children: <Widget>[
Container(
margin: const EdgeInsets.only(
left: 18.0,
top: 18.0,
right: 18.0,
),
padding: const EdgeInsets.only(
left: 25.0,
top: 25.0,
right: 25.0,
bottom: 10.0,
),
decoration: BoxDecoration(
color: color,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
),
child: Row(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.white,
child: Image(
image: iconImage,
fit: BoxFit.cover,
),
),
),
),
const SizedBox(width: 5.0),
Expanded(
child: Text(
title,
style: const TextStyle(
color: Colors.white,
letterSpacing: 1.0,
),
),
),
//TODO: Add other stuff here
const Icon(
Icons.arrow_forward_ios,
color: Colors.white,
size: 20.0,
),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 4.0,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.transparent, Colors.black12],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
),
],
),
);
}
}
Usage:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MainPage(),
debugShowCheckedModeBanner: false,
),
);
}
class MainPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Demo")),
body: ListView(
children: <Widget>[
StackedListTile(
title: "Techcombank1",
color: Colors.blue[600],
//iconImage: AssetImage("assets/images/1.png"), //TODO: Use this for asset images
iconImage: NetworkImage(
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfo2BL_di4IK1AuHOS4y_16BatmqdkOlcB1JBjJK2zK9sUvZ2FUg&s",
),
),
StackedListTile(
title: "Techcombank2",
color: Colors.red[600],
iconImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNvzXsqFidC5YqNrKHEJGt1kyC99dJ_EWt_Bcc5dyy4rNGzFk8yQ&s"),
),
StackedListTile(
title: "Techcombank3",
color: Colors.green[600],
iconImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNvzXsqFidC5YqNrKHEJGt1kyC99dJ_EWt_Bcc5dyy4rNGzFk8yQ&s"),
),
for(int i =0; i<100; i++)
StackedListTile(
title: "Item_$i",
color: Colors.amber.withOpacity(1-(i%10)/10),
iconImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNvzXsqFidC5YqNrKHEJGt1kyC99dJ_EWt_Bcc5dyy4rNGzFk8yQ&s"),
),
],
),
);
}
}
Try to use SliverToBoxAdapter
body: return Container(
color: Colors.white,
width: double.infinity,
child: SingleChildScrollView(
child: SliverToBoxAdapter(
child: Stack(
children: <Widget>[
Positioned(
top: 10,
child: card1(),
),
Positioned(
bottom: 10,
child: card1(),
),
],
),
),
),
),

flutter pin a widget relative to another widget

I am trying to create a form that has a card and a login button:
I have tried the following code:
import 'package:flutter/material.dart';
class LoginScreenDemo extends StatefulWidget {
#override
_LoginScreenState createState() => new _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreenDemo> {
#override
Widget build(BuildContext context) {
final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
style: TextStyle(fontSize: 25.0),
decoration: InputDecoration(
labelText: 'Email',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
),
);
final password = TextFormField(
obscureText: true,
autofocus: false,
style: TextStyle(fontSize: 25.0),
decoration: InputDecoration(
labelText: 'Password',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
),
);
final loginButton = Padding(
padding: EdgeInsets.only(top: 10.0),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
onPressed: () {},
padding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 30.0),
color: Colors.lightBlueAccent,
child: Text(
'LOGIN',
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.bold,
),
),
),
);
final goToSignUpScreen = Padding(
padding: EdgeInsets.only(top: 5.0),
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
onPressed: () {
Navigator.of(context).pushNamed('/signup');
},
child: Text(
"New account? Sign Up",
style: TextStyle(
fontSize: 15.0,
),
),
),
);
final loginCard = Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
color: Colors.white,
elevation: 4.0,
child: ListView(
shrinkWrap: true,
padding:
EdgeInsets.only(top: 100.0, left: 50.0, right: 50.0, bottom: 75.0),
children: <Widget>[
email,
SizedBox(height: 15.0),
password,
],
),
);
final buttonsContainer = Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(
top: MediaQuery.of(context).orientation == Orientation.landscape
? MediaQuery.of(context).size.height * 0.35
: MediaQuery.of(context).size.height * 0.26,
),
child: Column(
children: <Widget>[
loginButton,
goToSignUpScreen,
],
),
);
final backgroundContainer = Container(
height: MediaQuery.of(context).size.height * 0.40,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background_golf_course.jpeg'),
fit: BoxFit.cover,
),
),
);
final formContainer = Container(
alignment: Alignment.topCenter,
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.25,
right: 20.0,
left: 20.0,
),
child: Container(
width: MediaQuery.of(context).size.width * 0.75,
child: Stack(
children: <Widget>[
loginCard,
buttonsContainer,
],
),
),
);
return SafeArea(
child: Container(
color: Color(0xFFEEEEEE),
child: Stack(
children: <Widget>[
backgroundContainer,
formContainer,
],
),
),
);
}
}
I have placed the card and buttons in a stack widget and tried to place the buttons (as seen in buttonsContainer) above the card by defining their height and padding.
As, can be seen, I need to define different padding for portrait and landscape modes and also, it breaks if the screen size changes.
Is there a neater way to implement this?
Thanks
Container does have a property transform. Usage of this is an alternative to the top padding. Then buttonsContainer is placed relative to loginCard but is overlapping.
Widget buttonsContainer has a translation to the top.
final buttonsContainer = Container(
transform: Matrix4.translationValues(0.0, -34.0, 0.0),
alignment: Alignment.bottomCenter,
child: Column(
children: <Widget>[
loginButton,
goToSignUpScreen,
],
),
);
Widget formContainer then uses Column instead of Stack.
final formContainer = Container(
alignment: Alignment.topCenter,
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.25,
right: 20.0,
left: 20.0,
),
child: Container(
width: MediaQuery.of(context).size.width * 0.75,
child: Column(
children: <Widget>[
loginCard,
buttonsContainer,
],
),
),
);