I want to make a custom container/card that looks like:
How can I achieve overlapping/overlaying layout in flutter?
Use the Stack widget & the Positioned widget that helps to put the widgets where ever you want inside the stack
Code:
Container(
width: 135.0,
height: 80.0,
margin: EdgeInsets.only(right: 5.0),
child: Stack(
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 110.0,
height: 150.0,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
child: Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: EdgeInsets.only(left: 15.0, bottom: 20.0),
child: Text(
text,
style: TextStyle(
fontSize: 15.0,
fontFamily: 'PlayfairDisplay',
color: kInactiveSearchPageTextColor,
),
),
),
),
),
),
Align(
alignment: Alignment.topLeft,
child: Image.asset(
image,
width: 110,
height: 110,
),
),
Positioned(
top: 162,
left: 90,
child: Container(
width: 41.0,
height: 41.0,
child: RawMaterialButton(
fillColor: Colors.white,
shape: CircleBorder(),
elevation: 12.0,
child: Icon(
Icons.add,
color: kActiveSearchPageButtonColor,
),
onPressed: onPressed,
),
),
),
],
),
);
Related
I'm new to flutter and working on developing my flutter coding skills. I want to display 3 background images in a carousel while other texts and button remain same on the screen. in the below code, image carousel is working properly but my Get Started button and other texts not displaying at all. what should I do for correct this issue. appreciate your help on this.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
return Scaffold(
body: ListView(
children: [
CarouselSlider(
items: [
//1st Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person1.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
//2nd Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person2.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
//3rd Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person3.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
],
//Slider Container properties
options: CarouselOptions(
height: 810.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 16,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 1,
),
),
Padding(
padding: const EdgeInsets.only(left: 40, bottom: 230),
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Meet \nYour Doctor\nHere',
style: TextStyle(
height: 1.2,
fontFamily: 'Dubai',
fontSize: 35,
color: Color(0xffFAFAFA),
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(left: 30, top: 26),
child: Align(
alignment: Alignment.topLeft,
child: Text('DOCTOR',
style: TextStyle(
fontFamily: 'Dubai',
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(bottom: 60),
child: Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: 320,
height: 65,
child: ElevatedButton(
onPressed: () {},
child: Text(
'Get Started',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.normal),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Color(0xff05ABA3)),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(50.0),
),
))),
)),
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.white,
),
height: 5,
width: 120,
))),
],
),
);
}
}
you can set image in background using BoxDecoration in container-
Container(
height: 120.0,
width: 120.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'imagename'),
fit: BoxFit.fill,
),
shape: BoxShape.circle,
),
)
On your Scaffold's body: you are using ListView. You can still find those widgets by scrolling down.
For your case, you like to have text and button widgets over the UI.
You need to replace ListView with Stack on body.
return Scaffold(
body: Stack( // this
children: [
CarouselSlider
More about Stack and ListView.
I want to show container on top right of other container but its showing inside of it.
My code
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color(0xffd1e6f5),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SvgPicture.asset(
"assets/icon/notification.svg",
),
),
),
new Positioned( // draw a red marble
top: 0.0,
right: 0.0,
child: Container( decoration: BoxDecoration(
color: Color(0xff009fe1),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Padding(
padding: const EdgeInsets.all(3.0),
child: Text('01'),
),),
)
]
)
I want to show it outside a light container like this
You need an external container to simulate the overlap effect.
Check the behavior of that component and try replicate your desired behavior.
Container(
height: 140.0,
width: 140.0,
color: Colors.amber, // set as transparent.
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
height: 100.0,
width: 100.0,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(10))
),
),
),
Align(
alignment: Alignment.topRight,
child: Container(
width: 40.0, height: 40.0,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(10))
)
),
),
],
),
),
In addition to the answer of Marcos. I would like to tell you about this package badges
Example Usage
Badge(
badgeContent: Text('3'),
child: Icon(Icons.settings),
)
Try below code hope its helpful to you.
Container(
height: 100.0,
width: 100.0,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
height: 50.0,
width: 50.0,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Icon(
Icons.notifications,
color: Colors.white,
),
),
),
Positioned(
top: 17,
right: 17,
child: Container(
width: 25.0,
height: 25.0,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue[200],
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
child: Text(
'01',
),
),
),
],
),
),
Your result screen ->
You can also use Badge package here
Badge(
badgeColor: Colors.blue,
animationType: BadgeAnimationType.slide,
toAnimate: true,
position: BadgePosition.topEnd(
top: -10,
end: -10,
),
badgeContent: Text(
'01',
),
child: Container(
height: 50.0,
width: 50.0,
decoration: const BoxDecoration(
color: Color(0xffd1e6f5),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Icon(
Icons.notifications,
color: Colors.white,
),
),
),
Your result screen using package ->
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
),
],
),
),
I have this code in my Flutter project:
Row(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Icon(
Icons.face,
size: _mediaWidth*0.09,
color: Colors.grey[600],
)
),
Container(
margin: EdgeInsets.symmetric(
vertical: 10,
horizontal: _mediaWidth*0.03
),
child: Stack(
children: <Widget>[
Text(
"A",
style: TextStyle(
fontSize: _mediaWidth*0.08,
color: Colors.grey[600]
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(Icons.add)
),
Divider(height:10)
]
),
width: _mediaWidth*0.85,
height: _mediaHeight*0.05,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[400],
width: 1,
)
)
),
),
]
),
And I get this:
I want to increase the space between the text and the underline. I tried adding a bottom padding to the container, however, it only hid the text:
How can I properly add a space between the text and the bottom border of the container?
According do your code, the Container has an hard-coded height property:
height: _mediaHeight*0.05
Adding a padding, without increasing the height of the Widget, results in cropping the content.
The full example is reported below:
Row(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Icon(
Icons.face,
size: _mediaWidth*0.09,
color: Colors.grey[600],
)
),
Container(
margin: EdgeInsets.symmetric(
vertical: 10,
horizontal: _mediaWidth*0.03
),
padding: EdgeInsets.only(bottom: 10),
child: Stack(
children: <Widget>[
Text(
"A",
style: TextStyle(
fontSize: _mediaWidth*0.08,
color: Colors.grey[600]
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(Icons.add)
),
Divider(height:10)
]
),
width: _mediaWidth*0.85,
height: _mediaHeight*0.10, // we should modify the height as well
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[400],
width: 1
)
)
),
),
],
),
child: Stack(
//alignment: Alignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
width: MediaQuery.of(mContext).size.width / 1.7,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
gradient: LinearGradient(
colors: gradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: Text(title,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500)),
padding: EdgeInsets.only(top: 16, bottom: 16),
),
Visibility(
visible: isEndIconVisible,
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ImageIcon(
AssetImage("assets/ic_forward.png"),
size: 30,
color: Colors.white,
)),
),
],
),
I have a button which should be at the center of the screen. A text which is at the centre of the button and a right arrow. Since I want the button at the center i put alignment centre and so the right arrow coming as centre. Can anyone help me to solve this? I also want to know where we put click for this button.
You can use simple row Widget to achieve you expected ui.
Look at following code which help you may be.
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width / 1.7,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
color: Colors.red
,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("vdsv",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500)),
Visibility(
visible: true,
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ImageIcon(
AssetImage("assets/images/logo.png"),
size: 30,
color: Colors.white,
)),
),
],
),
padding: EdgeInsets.only(top: 16, bottom: 16),
),
],
)
Add align before Visibility
child: Stack(
//alignment: Alignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
width: MediaQuery.of(mContext).size.width / 1.7,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
gradient: LinearGradient(
colors: gradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: Text(title,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500)),
padding: EdgeInsets.only(top: 16, bottom: 16),
),
Align(alignment: Alignment.topRight,
child: Visibility(
visible: isEndIconVisible,
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ImageIcon(
AssetImage("assets/ic_forward.png"),
size: 30,
color: Colors.white,
)),
),)
],
),