Flutter container width inside MaterialButton - flutter

I am trying for hours to set my container width to its parent, which is a MaterialButton. I want the container to fill the entire width of the MaterialButton.
I tried to set the container width to "double.infitiy" or to "MediaQuery.of(context).size.width". Also played with "Expanded" etc. None of it worked. Not sure what I am doing wrong, thanks.
#override
Widget build(BuildContext context) {
return Material(
**child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
onPressed: onPressed,
child: Container(
width: double.infinity,**
margin: EdgeInsets.all(8.0),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.greenAccent,
borderRadius: BorderRadius.circular(10.0)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(text),
SizedBox(
height: 8.0,
),
SvgPicture.asset(
'images/medaillen.svg',
width: 80,
),
SizedBox(
height: 15.0,
),
Text(
textTopThree,
maxLines: 3,
),
],
),
),
),
);

I recommend you to replace the Material Button with InkWell, you can wrap any widget and get the onTap.
This should work:
InkWell(
onTap: () {},
child: Container(
width: double.infinity,
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.greenAccent,
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
children: [
Text('Button Text'),
SizedBox(
height: 8.0,
),
Image.asset(
'images/medaillen.svg',
width: 80,
),
SizedBox(
height: 15.0,
),
Text(
'textTopThree',
maxLines: 3,
),
],
),
),
),
If for some reason you need to use MaterialButton, then you should delete the Container and use the properties of the Material Button, like this:
MaterialButton(
onPressed: () {},
color: Colors.greenAccent,
minWidth: double.infinity,
padding: EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
child: Column(
children: [
SizedBox(
height: 8.0,
),
Text('Button Text'),
SizedBox(
height: 8.0,
),
Image.asset(
'images/medaillen.svg',
width: 80,
),
SizedBox(
height: 15.0,
),
Text(
'textTopThree',
maxLines: 3,
),
SizedBox(
height: 8.0,
),
],
),
),

Related

Placing button at the bottom of container in flutter

How can I create button like below,
Try below code hope its helpful to you. used Stack widget here for that
Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: circleRadius / 2.0),
child: Container(
height: 200,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.white,
margin: EdgeInsets.all(
16,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 2,
height: 2,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: Colors.transparent,
),
),
],
),
),
),
),
Container(
width: 100,
height: 40,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(),
color: Colors.transparent,
),
child: Padding(
padding: EdgeInsets.all(1),
child: DecoratedBox(
child: Center(
child: Text(
'Profile',
style:TextStyle(color: Colors.white,),
textAlign: TextAlign.center,
),
),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: Colors.blue,
),
),
),
)
],
),
Your Result screen->
Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20))),
child: TextButton(
child: Text(
"Profile",
style: TextStyle(color: Colors.white),
),
onPressed: () {},
),
),
you can use following code sample...change height according to your need...or use mediaquery for better result:
Container(
height: 275,
child: Stack(
children: [
Container(//container with background color
height: 250,
child: //other widgets
),
Positioned(
bottom: 0,
child: //button here
),
],
),
),

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

Flutter give container remaining height

Flutter i have a column i am showing widgets in this. But there is one issue that container isn't showing in full screen there is some white black space remaining.
My code
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Header Image
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(podcastInfo.artworkUrl600),
fit: BoxFit.fill,
),
),
child: Container(
margin: EdgeInsets.only(left: 10, top: 15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomAppBar(),
Spacer(),
],
),
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: mainHeading(podcastInfo.trackName ?? ""),
),
//Group
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
// "Overhaul Media Group",
podcastInfo.artistName,
style: TextStyle(
fontSize: 14,
color: Color(0xFF969696),
fontFamily: "Product Sans",
),
),
),
model.loading
? Container(
height: 150,
child: Center(
child: SpinKitWave(
color: Color(0xffe7ad29),
type: SpinKitWaveType.center),
),
)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Subscribe button
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Color(0xffe7ad29)),
),
onPressed: model.isSubscribed
? () {
model.unsubPodcast();
}
: () {
model.subscribePodcast();
},
child: Text(
model.isSubscribed
? "UNSUBSCRIBE"
: "SUBSCRIBE",
style: TextStyle(
color: Colors.white,
),
),
),
///
///Share Button
RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Color(0xffe7ad29)),
),
onPressed: () {
model.sharePodcast();
},
child: Text(
"SHARE",
style: TextStyle(
color: Colors.white,
),
),
),
],
),
),
//Body text
Padding(
padding: const EdgeInsets.only(
left: 8, right: 8, bottom: 8),
child: Container(
child: Text(
// "Podcast Overhaul was created to provide you with helpful hints, tips, & strategies you need to help you get the most out of your podcast every episode...ALL in 10 minutes or less.",
model.podcast.description ?? "",
style: TextStyle(
color: Color(0xFFB0ABAB),
fontSize: 15,
fontFamily: "Sogoe UI",
),
),
),
),
///Season
Container(
decoration: BoxDecoration(
color: Color(0xffe7ad29),
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
SizedBox(
height:
MediaQuery.of(context).size.height *
0.02,
),
Container(
width:
MediaQuery.of(context).size.width,
padding: EdgeInsets.only(bottom: 6),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFF707070),
),
),
),
child: mainHeading("EPISODES"),
),
Column(
children: model.podcast.episodes
.map<Widget>(
(e) => Container(
width: MediaQuery.of(context)
.size
.width,
padding: EdgeInsets.only(
bottom: 6, top: 10),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFF707070),
),
),
),
child: GestureDetector(
onTap: () {
print('test');
print(podcastInfo);
print('debug');
print(e);
Navigator.pushNamed(
context,
'player',
arguments: new PlayerInfo(
item: podcastInfo,
episode: e,
),
);
},
child: mainHeading(e.title),
),
),
)
.toList(),
),
],
),
),
)
],
),
],
),
)
],
),
You can see in the screenshot its showing white empty space I try to wrap my yellow container in expanded but it's not working. I think I can sole by height but then it will scroll or some related issue will come.
Container(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Header Image
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(podcastInfo.artworkUrl600),
fit: BoxFit.fill,
),
),
child: Container(
margin: EdgeInsets.only(left: 10, top: 15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomAppBar(),
Spacer(),
],
),
),
),
You can wrap column in in container and give a height using media query. On overflow you can use SinglechildScrollView also.

How to dynamically adjust container size in flutter?

I am using a white container with height
height: MediaQuery.of(context).size.height
And I am adding several red containers in it. When the number of these inside containers is less, the scrolling works perfectly like this
But as I increase the number of containers inside the big container, scrolling kind of overflows the container, like this
One solution I found out was that if I increase the height of white container, i.e:-
height: MediaQuery.of(context).size.height*7
But it makes the app look ugly and would eventually fail when the number of red containers is further increased. How can I fix this issue?
Code for the Program:-
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Test(),
));
}
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Container(
color: Colors.black,
child: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Row(
children: <Widget>[
Text(
'TEST',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
],
),
),
SizedBox(height: 60.0,),
Container(
margin: EdgeInsets.only(top:180.0,),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 15.0,
top: 20.0,
),
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Center(
child: Text(
'TEST',
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
SizedBox(height: 20.0,),
Column(
children: <Widget>[
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
],
)
],
),
),
],
),
),
],
),
),
),
),
);
}
}
Okay so after some suggestions from comments I myself found the solution.
Instead of using listview inside the white container, I removed it and wrapped the white container with SingleChildScrollView and also wrapped it with Flexible
Now the container automatically adjusts according to the amount of containers in it.
Fixed code:-
import 'package:flutter/material.dart';
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Container(
color: Colors.black,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Row(
children: <Widget>[
Text(
'TEST',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
],
),
),
SizedBox(
height: 60.0,
),
//User INFO
SingleChildScrollView(
child: Flexible(
child: Container(
margin: EdgeInsets.only(
top: 180.0,
),
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: Padding(
padding: EdgeInsets.only(
left: 15.0,
right: 15.0,
top: 20.0,
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: <Widget>[
//greeting text
Row(
children: <Widget>[
Expanded(
child: Center(
child: Text(
'TEST',
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
SizedBox(
height: 20.0,
),
//app work
Column(
children: <Widget>[
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
],
)
//add button
],
),
),
],
),
),
),
),
),
],
),
),
),
),
),
);
}
}
To achieve your desired layout try playing with padding value of this container
Container(padding: EdgeInsets.only(top: 35.0, ),
margin: EdgeInsets.only(top:180.0,),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
in my case i used padding: EdgeInsets.only(top: 35.0, ),
result
First, you need to get the correct screen height by reducing the extra top padding and appBar size (if that page contains appBar)
To do that simply add
appBar: PreferredSize(
preferredSize: Size.fromHeight(50),
child: AppBar(
automaticallyImplyLeading: false,
elevation: 0,
title: Text(
"Hello"
),
backgroundColor: const Color(0xFF005898),
)),
Then add this to height
double screenHeight = MediaQuery.of(context).size.height -
50 -
MediaQuery.of(context).padding.top; // Top Screen Height - appbarHeight - Top Padding(That top status bar on every phone)
Then Everything is as same but, Before SingleChildScrollView add a sizedBox then provide screenHeight and width as per requirement then in the child add scrollView and the rest of the code

How to add onClick on image.asset in flutter?

I am using three images on clicking which will navigate to other page so how should I use onClick on these images? My code is below:
Row(
children: [
Expanded(
child: Column(
children: <Widget>[
Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset('assets/cat.jpg',
width: 110.0, height: 110.0),
)),
Text(
'Tickets',
style:
TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
)
],
),
),
Expanded(
child: Column(
children: <Widget>[
Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset('assets/cat.jpg',
width: 110.0, height: 110.0),
)),
Text(
'Buy Tickets',
style:
TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
)
],
),
),
Expanded(
child: Column(
children: <Widget>[
Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset('assets/cat.jpg',
width: 110.0, height: 110.0),
)),
Text(
'Prizes',
style:
TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
)
],
),
),
],
),
Expected : Adding an onClick on images
I used GestureDetector but it is throwing error so I need to know what I should use and how.
I read other answers and found that you were having issues with border, try this solution.
GestureDetector(
onTap: () {}, // Image tapped
child: Image.asset(
'assets/cat.jpg',
fit: BoxFit.cover, // Fixes border issues
width: 110.0,
height: 110.0,
),
)
If you want splash effects, then use Ink.image or Ink with decoration.
InkWell(
onTap: () {}, // Image tapped
splashColor: Colors.white10, // Splash color over image
child: Ink.image(
fit: BoxFit.cover, // Fixes border issues
width: 100,
height: 100,
image: AssetImage(
'assets/cat.jpg,
),
),
)
Material(
child: InkWell(
onTap: () {},
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset('assets/cat.jpg',
width: 110.0, height: 110.0),
),
),
)
You can use InkWell as show by #Murat Aslan.
And you can also use GestureDetector as shown below.
Material(
child: GestureDetector(
onTap: () {},
child: Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset('assets/cat.jpg',
width: 110.0, height: 110.0),
),
),
),
)
An alternative is to use a FlatButton with an Image as a child:
FlatButton(
onPressed: () {
print('I got clicked');
},
child: Image.asset('images/ball1.png'),
),
To render a material splash during tap on image, use Ink.image
InkWell(
onTap: () {},
child: Ink.image(
image: AssetImage('assets/cat.jpg'),
// fit: BoxFit.cover,
width: 110,
height: 110,
),
)