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
),
],
),
),
Related
How can I make the circleavatar to be placed at the top of the container
you can use Stack for this. like:
...
return Stack(
children: [
Positioned.filled( child:
Scaffold(
appBar: ...
body: Column([
DecoratedBox(
...
)
]),
)),
Positioned(
top: 24,
child:
CircleAvatar( child:
CachedNetworkImage(
...
),
),
),
],
);
something like that.
Try below code hope its helpful to you.refer Stack class here
Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 21),
child: Container(
height: 200,
width: double.infinity,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.white,
margin: EdgeInsets.all(
16,
),
),
),
),
Container(
width: 100,
height: 90,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: Colors.transparent,
),
child: CircleAvatar(),
)
],
),
Your result screen->
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.
In my flutter app I have a GridView in which I list cards. In the cards I want to have an image and some text. I am trying to do this as follows:
import 'package:flutter/material.dart';
class Home extends StatefulWidget{
#override
State<StatefulWidget> createState() {
return HomeState();
}
}
class HomeState extends State<Home>{
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.green,
Colors.teal,
]
)
),
),
Padding(
padding: const EdgeInsets.only(top: 65),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white60, width: 2.0)
),
padding: EdgeInsets.all(8),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(Icons.restaurant, size: 120,),
),
),
]
),
SizedBox(
height: 8,
),
Text(
"Genesis Technologies",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white
),
),
SizedBox(
height: 6,
),
Text(
"Please take the following precautions",
style: TextStyle(
fontSize: 16,
color: Colors.white70
),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 350),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
)
),
),
Container(
margin: EdgeInsets.only(top: 250),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30)
)
),
child: Padding(
padding: EdgeInsets.all(0),
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: <Widget>[
Container(
height: 200,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Cover your mouth and nose when yous sneeze or cough",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Avoid touching your face with unwashed hands",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Stay home if you don't need to get out for critical matters",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
],
)
),
),
],
),
),
),
);
}
}
And this renders the list of cards fine. My problem is that the cards bottom is being overflowed. I wrap the card in a container to fix this which looks like the follows:
Container(
height: 200,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.restaurant, size: 120,),
Text(
"Some text here",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
],
),
),
),
),
I don't understand why this is happening. Any help would be appreciated. Thanks.
ok... I usual don't do that but I had to rework the whole structure because most of the things didn't make any sense. Now I don't really understand.. Why do you want cards to increase size to not overflow.. Did you mean decrease size? The cards in your grid view will be always the same because you use grid view. You have set crossAxisCount to 2 so 2 items in x axis and square.. If you add more, then on smaller screen they will be accessible by scrolling and will not overflow. I have set position of the container where you have all your cards from the top to 1/3 of the screen height which perhaps is better then hardcoding it to fixed size as you had. Try it and let me know if you need to adjust it in any other way.
UPDATE
Scaffold(
body: Column(children: [
Flexible(
flex: 2,
child: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green,
Colors.teal,
])),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: FractionallySizedBox(
heightFactor: 0.5,
child: Container(
width: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
border:
Border.all(color: Colors.white60, width: 2.0)),
padding: EdgeInsets.all(8),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(
Icons.restaurant,
),
),
),
),
),
SizedBox(
height: 8,
),
Text(
"Genesis Technologies",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white),
),
SizedBox(
height: 6,
),
Text(
"Please take the following precautions",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.white70),
),
],
),
),
),
Flexible(
flex: 3,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.green,
Colors.teal,
])),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30))),
child: Padding(
padding: EdgeInsets.all(0),
child: GridView(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
children: <Widget>[
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Cover your mouth and nose when yous sneeze or cough",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Avoid touching your face with unwashed hands",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
elevation: 10,
child: Container(
margin: EdgeInsets.all(4),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.restaurant,
size: 120,
),
Text(
"Stay home if you don't need to get out for critical matters",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
),
],
)),
),
),
),
]),
);
I am using the Slidable Widget which works pretty well, but there is a strange behaviour while sliding my container. Here is the code and a GIF to show the vertical lines that should not appear.
edit:
I use this slide functionality within my friendslist. Therefore i call the createSlidable() within a loop. Within the Slidable Widget there is another method to create the child container getFriendContainer().
Widget getFriendContainer(Friend friend, int i) {
return Container(
padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 20, bottom: 10.0),
decoration: BoxDecoration(
color: Color.fromRGBO(13, 13, 56, 1.0),
borderRadius: i==0 ? BorderRadius.only(
topLeft: Radius.circular(25.0),
topRight: Radius.circular(25.0),
) : null,
),
child: Row(
children: <Widget>[
Expanded(
flex: 15,
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(9.0),
height: 40.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Color.fromRGBO(119, 119, 136, 1.0), width: 0.5),
),
child: Image.asset('assets/icon.png', width: 70.0, height: 70.0, color: Color.fromRGBO(119, 119, 136, 1.0),),
),
],
),
),
Expanded(
flex: 70,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
"${friend.name}",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14.0,
color: Colors.white,
),
)
),
],
),
),
Expanded(
flex: 15,
child: friend.muted ? friendMutedIcon(friend) : Container(),
),
],
),
);
}
Widget createSlidable(Friend friend, int i) {
return Slidable(
actionPane: SlidableDrawerActionPane(),
controller: _slidableController,
actionExtentRatio: 0.15,
child: ...,
secondaryActions: <Widget>[
SlideAction(
color: getFriendContainer(Friend friend, int i),
onTap: () {
},
child: Container(
height: 50.0,
width: 100.0,
decoration: BoxDecoration(
color: ...,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(25.0),
bottomLeft: const Radius.circular(25.0),
),
),
child: Icon(Icons.volume_off, color: ...,),
),
),
SlideAction(
color: ...,
onTap: () {
},
child: Container(
height: 50.0,
width: 100.0,
color: ...,
child: Icon(Icons.delete, color: ...,),
),
),
],
);
}
I would appreciate any kind of help.
I found a solution for this. Using the IconSlideAction Widgets instead of SlideAction the issue is solved.
I'm trying to put a horizontal line(currently Divider but could be changed as a CustomPaint) as a background of a Row. However, regardless of the order of children, the line always goes front of the Row. I can't figure out what's wrong. Here's the code.
Stack(
children: <Widget>[
Positioned.fill(
child: const Divider(color: Colors.black),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Ink(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.arrow_forward, size: 32)
),
),
Ink(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.location_on, size: 32)
),
),
Ink(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.flag, size: 32)
),
),
],
),
],
),
and here's the result image.
Use Container instead of Ink
Stack(
children: <Widget>[
Positioned.fill(
child: const Divider(color: Colors.black),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.arrow_forward, size: 32)
),
),
Container(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.location_on, size: 32)
),
),
Container(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.flag, size: 32)
),
),
],
),
],
);