i try to fill background of picture use mediaquery to fill picture. ios work fine but android its doesn't work i use media query to fill picture and then got this
can i make another way to fill it ?
here is code
#override
Widget build(BuildContext context) {
double size = MediaQuery.of(context).size.width;
return Scaffold(
body: Form(
key: formKey,
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
buildBackgroud(context),
GestureDetector(
onTap: () => FocusScope.of(context).requestFocus(FocusNode()),
behavior: HitTestBehavior.opaque,
child: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: size * 0.3,
),
buildTopic('General Information'),
buildTextBoxEmail(size),
buildTextBoxUserName(size),
buildTextBoxPassword(size),
buildButton(size, context),
Row(
children: [
IconButton(onPressed: (){}, icon: Icon(Icons.add_photo_alternate))
],
)
],
),
),
)
],
),
),
));
}
background method is
SvgPicture buildBackgroud(BuildContext context) {
return SvgPicture.asset(
'assets/images/bg.svg',
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
fit: BoxFit.fill,
);
}
You can try this one, wrapping SvgPicture.asset() into SizedBox and giving full screen height and width into it in your buildBackground function.
SvgPicture buildBackgroud(BuildContext context) {
return SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
SvgPicture.asset(
'assets/images/bg.svg',
alignment: Alignment.center,
fit: BoxFit.cover,
)
);
}
Related
I want to have a container with a flexible body (red) height and a fixed button height (gray).
The complete container should be as small as possible and have a max height.
If the content is overflowing the max height it should be scrollable.
I'm new to flutter, so I have no idea how to achieve this.
I tried it with a ConstraintBox with maxHeight, but then the whole container is bigger then it have to be, when the content is small.
return Container(
child: Column(
children: [
ConstrainedBox(
maxHeight: 400
child: //SomeWidget that could overflow
),
Container(
height: 150,
child: Center(
child: TextButton(child: Text('OK'))
),
)
],
),
);
Can someone help?
You can set constraints of your Container. Also you can use Flexible and SingleChildScrollView
Container(
constraints: BoxConstraints(
maxHeight: 300,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: SingleChildScrollView(
child: Column(
children: [
//SomeWidget that could overflow
],
),
)),
Container(
color: Colors.amber,
height: 150,
child:
Center(child: TextButton(onPressed: () {}, child: Text('OK'))),
)
],
),
)
I've achieved it now, with that code:
Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: SingleChildScrollView(
child: //SomeWidget that could overflow
),
),
Container(
alignment: Alignment.bottomCenter,
child: TextButton(
child: Text('OK')
)
)
]
)
)
According to your UI i think this one will be perfect, and let me know if you need any changes. use constraints to change size.
final widgets = List.generate(
12,
(index) => Container(
height: 100,
color: index % 2 == 0 ? Colors.cyanAccent : Colors.greenAccent,
child: Text("item $index"),
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: SizedBox(
///* used 90% of screen for items
height: constraints.maxHeight * .9,
child: ListView(
children: [
Center(child: Text("inside listView")),
///your widgets
...widgets,
Center(child: Text("End of listView")),
],
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
color: Colors.grey.withOpacity(.3),
///* used 10% of screen for Button
height: constraints.maxHeight * .1,
child: Center(
child: TextButton(
child: Text('OK'),
onPressed: () {},
),
),
),
),
],
),
),
);
}
In the picture below, I tried using the SizedBox Widget and I set the height:
SizedBox(
height: MediaQuery.of(context).size.height / 5.9,
),
The second solution is I try to use LayoutBuilder widget and builder and I specify the height: constraints.maxHeight * 0.4 but I'm getting the same result.
Here's the code:
body: SingleChildScrollView(
child: Column(
children: [
Stack(
children: <Widget>[
_buildCoverImage(screenSize),
SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
SizedBox(height:MediaQuery.of(context).size.height / 5.9),
_buildProfileImage(),
_buildFullName(context),
_buildStatContainer(context),
]
),
),
),
],
),
],
),
),
);
output
Hope you want something like this, while using LayoutBuilder use it at top level of widget tree.
example code
import 'package:flutter/material.dart';
class BackSide extends StatelessWidget {
const BackSide({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => SizedBox(
height: constraints.maxHeight,
width: constraints.maxWidth,
child: Stack(
fit: StackFit.expand,
alignment: Alignment.topCenter,
children: <Widget>[
// _buildCoverImage(screenSize),
Container(
height: constraints.maxHeight,
width: constraints.maxWidth,
color: Colors.amberAccent,
child: Text("Background"),
),
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: constraints.maxHeight * .4,
),
...List.generate(
15,
(index) => Container(
height: 100,
width: double.infinity,
color: index % 2 == 0
? Colors.pinkAccent
: Colors.cyanAccent,
child: Text("item $index"),
)).toList(),
// _buildProfileImage(),
// _buildFullName(context),
// _buildStatContainer(context),
],
),
)
],
),
),
),
);
}
}
I'm using a Stack to Positioned one widget on top of an Image.asset widget, but the problem I have is that my whole Stack widget is not scrollable to see the whole content. I wrapped the Stack widget with a SingleChildScrollView but the problem still persists. If I wrap the Stack widget with a Containter and give the height: MediaQuery.of(context).size.height, it's scrollable but I can't still see the whole content of the page. Where is my mistake, that's what I'm wondering? With what widget should I wrap Stack or is there a better way for my problem? In short, I'm stacking a Column on top of an Image and I need the whole Stack widget to be scrollable so I can see the whole content of the Stack widget. Here is the code:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
overflow: Overflow.visible,
children: [
Image.asset(
'lib/modules/common/images/logo.png',
width: double.infinity,
height: 196.0,
),
Positioned(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
top: 136.0,
child: Column(
children: [
Container(), // some content inside the container
Container(), // // some content inside the container
],
),
),
],
),
),
),
);
}
Thanks in advance for the help!
if you mean to have a image on back and scrollable content at fron check this answer, if not let me know and share a prototype/image that you want.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: SafeArea(
child: SingleChildScrollView(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 3,
child: Stack(
fit: StackFit.loose,
children: [
Align(
alignment: Alignment.topCenter,
child: Image.asset(
'assets/image.jpg',
width: double.infinity,
height: 196.0,
),
),
Positioned(
top: 136.0,
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(
2,
(index) => Container(
height: 100,
width: double.infinity,
color: index % 2 == 0
? Colors.amberAccent
: Colors.cyanAccent,
), // some content inside the container
// some content inside the container
),
),
),
),
],
),
),
),
),
);
}
Widget build(BuildContext context) {
var appBar = AppBar();
return Scaffold(
body:
Row(
children: [
Container(
color: Colors.green,
width: 800,
child: SizedBox(
width: 50,
child: ElevatedButton(child: Text("sdf"), onPressed: () {},),
)
),
Container(
child: Text("Hello"),
)
],)
);
}
I expected that size of button will be equal of SizedBox size
I can highly recommend taking a look at this official documentation about constraints: https://flutter.dev/docs/development/ui/layout/constraints
In your case, you have a Row which practically imposes infinite width. The Container as a direct child of your Row can set it's width to whatever you want but the Container will still pass down infinite width (as constraints) from the parent. Therefore you need to tell Flutter at this point, that you want to avoid this implicit given constraint - one working solution would be:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Container(
color: Colors.green,
width: 300.0,
child: UnconstrainedBox(
alignment: Alignment.centerLeft,
child: SizedBox(
width: 100.0,
child: ElevatedButton(
onPressed: () {},
child: Text('LOL'),
),
),
),
),
Text('WTF')
],
),
);
}
I have a body of scaffold that structured like this :
body : Column(
children : [
Expanded(
child : SingleChildScrollView(
Container (
Column(
//content
)
)
)
),
BottomMenu()
]
)
And the problem is the content would not show up if i dont define the width and height for the Container inside SingleChildScrollView, but if i define the height then the height of my childscrollview wont work dynamically with the content, i want the height to fit the content inside of my container so i can scroll until the end of content. I am still new to this so any advice and suggestion will be appreciated. Thankyou
It is better to use Stack instead of the column as top Widget like this:
Stack(
children: <Widget>[
SingleChildScrollView(
Container (
Column(
//content
)
)
),
Align(
alignment: Alignment.bottomCenter,
child: BottomMenu(),
),
],
)
Does this help you?
Your layout isn't best practice, try:
return Scaffold(
body: LayoutBuilder(builder: (context, constraints) {
return SingleChildScrollView(
child: Container(
width: constraints.maxWidth,
height: constraints.maxHeight,
child: Column(
children: [
//your content
],
),
),
);
}));
This makes a container which is the size of the screen, and it contains a column which will scroll with all the content.
I could not understand what exactly the issue is. But I could give some idea.
Try something like this,
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
color: Colors.blue,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.9,
child: SingleChildScrollView(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: ListView(
children: [
Row(
children: [
Container(
margin: const EdgeInsets.only(bottom: 10.0),
height: 100.0,
width: 100.0,
color: Colors.red,
),
],
),
....
],
),
),
),
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
child: BottomMenu(),
),
],
),
);
}
Hope that solves your issue.