Related
I am trying to move the button to the bottom of the screen but in vain. I basically have 2 textEditingControllers and a button but the latter keeps sticking with the textEditingController. Any advice, please?
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
physics: const ScrollPhysics(),
child: Column(
children: [
return Card(
elevation: 5,
clipBehavior: Clip.antiAlias,
margin: const EdgeInsets.all(0),
child: Container(
padding: const EdgeInsets.all(15),
child: Row(
children: [
Column(
),
Expanded(
child: Column(
children: [
LocationField(
isDestination: false,
textEditingController: sourceController),
LocationField(
isDestination: true,
textEditingController: destinationController),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.all(5),
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text('Bottom Button '), // trying to move to the bottom
),
),
)
],
);
}
Where am I going wrong?
If you are in Scaffold and want to have some Button in a fixed position on the screen you can use floatingActionButton Property.
Example:
Scaffold(
floatingActionButtonLocation:
FloatingActionButtonLocation.centerFloat,
floatingActionButton: Container(
height: 50,
margin: const EdgeInsets.all(10),
child: ElevatedButton(
onPressed: () {},
child: const Center(
child: Text('Hello'),
),
),
),
);
Of course floatingActionButton property is mainy used for FloatingActionButton but it's good to know that you can put there any widget (other types of buttons, Rows, Columns and others). For positioning this widget you can use 'floatingActionButtonLocation' Scaffold property.
Try below code
Column(
children: <Widget>[
Card(
elevation: 5,
clipBehavior: Clip.antiAlias,
margin: const EdgeInsets.all(0),
child: Container(
padding: const EdgeInsets.all(15),
child: Row(
children: [
Expanded(
child: Column(
children: [
Container(
width: 100,
height: 50,
color: Colors.red,
),
Container(
height: 50,
width: 100,
color: Colors.black,
),
],
),
),
],
),
),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.all(5),
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text(
'Bottom Button '), // trying to move to the bottom
),
),
),
),
],
),
Result->
You can achieve it by making small changes in your code it self. you have to change the tree of your code as below.
Scaffold -> Body -> Column
Column First Child Should be wrapped with Expanded and then SinglechildScrollView then Column and remaining Widgets
And the Second Widget should be your Button.
This will make the Button to move to the end of the screen. I hope thats what you are trying to do.
But this way makes the Button visible on the screen all the time where as remaining widgets will be scrolling.
I have a flutter app that I want to add "stories" to, but I am unable to do so cause I can't place 3 buttons over an image.
That's my desired look...
And this is what I can do so far...
And this is my code:-
child: GestureDetector(
child: Center(
child: Stack(
alignment: Alignment.bottomRight,
children: [
Image.network(
widget.url,
),
Container(
child: Column(children: [
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
)
]),
)
],
),
),
onTap: () => controller.next(),
),
How can I achieve this effect?
Am I doing something with the Stack widget?
Using Positioned inside Stack can solve your problem, Below code may work for you, You can position the Container where you want it to be.
Widget build(BuildContext context) {
var ScreenHeight = MediaQuery.of(context).size.height;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Expenses App"),
backgroundColor: Colors.pink[900],
actions: [
IconButton(
icon: Icon(Icons.add),
// onPressed: () => startAddNewTransaction(context),
),
],
),
body: GestureDetector(
child: Center(
child: Stack(
// alignment: Alignment.bottomRight,
children: [
Image.network(
'https://picsum.photos/250?image=9',
),
Positioned(
top: ScreenHeight * 0.17,
child: Container(
child: Column(children: [
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
SizedBox(height: ScreenHeight * 0.01),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
),
SizedBox(height: ScreenHeight * 0.01),
Container(
color: Colors.grey,
child:
Column(children: [Icon(Icons.share), Text('مشاركة')]),
)
]),
),
)
],
),
),
// onTap: () => controller.next(),
),
),
);
}
The default mainAxisSize of Column is max, If you set MainAxisSize.min for all Column you will get Stack's alignment.
child: Column(
mainAxisSize: MainAxisSize.min,
As for the alignment of your desire UI, I prefer using Align widget to wrap the parent Column.
Align(
alignment: Alignment(-1, .5), //play with it
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
More about Align.
GestureDetector(
child: Center(
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://st2.depositphotos.com/3759967/5593/i/600/depositphotos_55936567-stock-photo-swirling-frosty-multi-colored-fractal.jpg",
),
),
),
),
Positioned(
bottom: MediaQuery.of(context).size.height * 0.1,
child: Column(
children: [
Container(
margin: const EdgeInsets.only(bottom: 10.0),
color: Colors.grey,
child: Column(
children: const [Icon(Icons.share), Text('مشاركة')]),
),
Container(
margin: const EdgeInsets.only(bottom: 10.0),
color: Colors.grey,
child: Column(
children: const [Icon(Icons.share), Text('مشاركة')]),
),
Container(
margin: const EdgeInsets.only(bottom: 10.0),
color: Colors.grey,
child: Column(
children: const [Icon(Icons.share), Text('مشاركة')]),
)
]),
),
],
),
),
),
You can do like this, place image as background of a container, and your column in a positioned widget.
example
There is a gap between the two elements , how to eliminate them?
sample code and effect screenshots are as follows ：
code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.red, // Color(0xFF275FF0),
child: Column(
// mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 5),
Container(
height: 100,
color: Colors.white,
),
Container(
height: 100,
color: Colors.white,
),
Container(
height: 100,
color: Colors.white,
),
])))
}
I did not notice those pixels before. To avoid that you should use ListView instead of Column.
Here is an example code with a similar code than yours.
return Scaffold(
body: SafeArea(
child: ColoredBox(
color: Colors.red,
child: ListView(
shrinkWrap: true,
children: [
const SizedBox(
height: 5,
),
Container(
height: 100,
color: Colors.white,
),
Container(
height: 200,
color: Colors.white,
),
Container(
height: 300,
color: Colors.white,
)
],
),
),
),
);
I also use ColoredBox as it is more optimized and specific than Container
I am wondering why is it that my GridView is not rendering the widgets. I am trying to render the buttons in two columns and 2-3 rows.
The code is the following:
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
GridView.count(
shrinkWrap: true,
primary: true,
crossAxisCount: 2,
children: <Widget>[
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Wifi')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
Center(
child: FlatButton(
onPressed: () => {},
padding: EdgeInsets.all(10.0),
child: Column(children: <Widget>[
Image.asset(
'assets/img/wifi.png',
height: 50.0,
width: 50.0,
),
Text('Key/Access')
]),
),
),
],
)
],
)));
}
}
I get an error, in the android emulator it renders yellow and black strips instead of the buttons with the corresponding images.
Wrap it with Container ( height: .. , width : double.infinity )
Or with SizedBox
Try removing the Column widget above the GridView
Im constantly getting this error while trying to expand the Container to screen's full available width and height. What stresses me out and confuses me is that it is inside Scaffold which is inside MaterialApp but still it throws this stupid error what do I do now? Please help.
Why did they made it so difficult to just get the screen size or just expand the container's width 100%? Im trying to fix this since hours but there is no solution at all.
This is the error:
Here is the code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey[800],
body: SafeArea(
child: Column(
children: <Widget>[
Container(
child: Text('asdfasdfsfd'),
),
Expanded(
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
child: Image.asset('images/cover.jpg')),
),
SizedBox(
height: 5,
),
//
Container(
child: Center(child: Text('Folder Name')),
),
SizedBox(
height: 5,
),
Container(
child: Slider.adaptive(
value: 0,
onChanged: null,
min: 0,
max: 5,
label: '5',
),
),
//
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 60,
height: 25,
child: Center(child: Text('08:16')),
),
Container(
width: 60,
height: 25,
child: Center(child: Text('-06:44'))),
],
),
),
SizedBox(
height: 15,
),
// Bottom Third container
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
],
),
),
SizedBox(
height: 15,
),
// Bottom Second container start
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 60,
height: 60,
// Previous Button
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
// Play Button
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
// Next Button
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
],
),
),
SizedBox(
height: 20,
),
// Bottom container start
Container(
// 3rd Container
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
],
),
),
SizedBox(
height: 10,
)
],
)),
),
);
}
}
While technically MaterialApp is above your query in the tree, the BuildContext context that it currently accesses is above it.
You need to obtain BuildContext that comes below the MaterialApp. There are multiple ways this can be done.
You can move MaterialApp out of the MyApp widget:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: MyApp()));//`MaterialApp` moved here
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {//Now this context is below the `MaterialApp`
return Scaffold(
backgroundColor: Colors.grey[800],
body: SafeArea(
child: Column(
children: <Widget>[
Container(
child: Text('asdfasdfsfd'),
),
Expanded(
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
child: Image.asset('images/cover.jpg')),
),
...
Use a Builder to obtain a different BuildContext
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Builder(//Use `Builder` below `MaterialApp` but above where you need access to proper context
builder: (context) {//Different context provided here
return Scaffold(
backgroundColor: Colors.grey[800],
body: SafeArea(
child: Column(
children: <Widget>[
Container(
child: Text('asdfasdfsfd'),
),
Expanded(
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
child: Image.asset('images/cover.jpg')),
),