How to place one silverappbar over another? - flutter

I want my silverapp bar in this format:
my code is as follows:
body: CustomScrollView(slivers: [
SliverAppBar(
backgroundColor: Colors.black,
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Container(
color: Colors.blue[100],
margin: EdgeInsets.all(5),
child: Column(
children: [
Row(
children: [
AnimatedContainer(
height: 150,
width: 150,
margin: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: borderRadius,
color: color1,
),
child: Image.network(
'https://thumbs.dreamstime.com/b/pizza-rustic-italian-mozzarella-cheese-basil-leaves-35669930.jpg',
height: 200,
width: 150,
),
duration: Duration(seconds: 3),
curve: Curves.bounceInOut,
),
SizedBox(
width: 10,
),
Container(
child: Column(
// ignore: prefer_const_literals_to_create_immutables
children: [
Text(
'NAME: PIZZA',
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
)
],
),
],
),
),
),
),
SliverAppBar(
backgroundColor: Colors.black,
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Container(
color: Colors.blue[50],
margin: EdgeInsets.all(5),
child: Column(
children: [
Row(
children: [
AnimatedContainer(
height: 150,
width: 150,
margin: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: borderRadius,
color: color1,
),
child: Image.network(
'https://thumbs.dreamstime.com/b/pizza-rustic-italian-mozzarella-cheese-basil-leaves-35669930.jpg',
height: 200,
width: 150,
),
duration: Duration(seconds: 3),
curve: Curves.bounceInOut,
),
SizedBox(
width: 10,
),
Container(
child: Column(
// ignore: prefer_const_literals_to_create_immutables
children: [
Text(
'NAME: PIZZA',
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
)
],
),
],
),
),
),
),
I have 4 more SilverAppBars with the same internal structure. How to place these app bars one over another as in the example image? I want the appbars to overlap each other and move in the same way as in the sample video.
Currently my app looks like this:

Related

How to change the button position and make the design button flutter?

A design like I want:
This is the current design:
Hello. How to change the position of the button and make the button design like the picture I show. I have tried to make it myself but still failed to get the design as in the picture I showed. I am new to flutter. Please guide me and hope someone is willing to help me.
This is my current code:
Container(
padding: const EdgeInsets.symmetric(horizontal: 150),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 35),
Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child: Center(
child: FutureBuilder(
future:
_getSignedURL(widget.patientProfile.avatar),
builder: (BuildContext context,
AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Container(
color: Colors.white,
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color:
Color.fromRGBO(255, 255, 255, 0.3),
border: Border.all(
color: Colors.black12,
width: 1.0,
),
borderRadius: BorderRadius.all(
Radius.circular(200.0)),
),
),
);
} else {
return CircleAvatar(
radius: 100,
backgroundImage:
NetworkImage(snapshot.data),
);
}
},
),
),
),
],
),
),
Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.only(top: 10),
child: Align(
alignment: Alignment.centerRight,
child: ButtonTheme(
minWidth: 100.0,
height: 38.0,
buttonColor: mainColor,
// ignore: deprecated_member_use
child: RaisedButton(
padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
textColor: Colors.white,
color: mainColor,
child: Text('Save'),
onPressed: () => _updatePatientProfile(),
),
),
)),
),
],
),
),
],
),
),

Play with Stack widget, there are others way of doing this.
class B extends StatefulWidget {
B({Key? key}) : super(key: key);
#override
State<B> createState() => _BState();
}
class _BState extends State<B> {
Color mainColor = Colors.blue;
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => Column(
children: [
Column(
children: [
Container(
color: Colors.cyanAccent,
height: 200 + 70 + 60, // based on circle+ text space
child: Stack(
clipBehavior: Clip.none,
children: <Widget>[
// divider
Align(
alignment: Alignment(0, -.35),
child: Container(
width: constraints.maxWidth,
height: 8,
color: mainColor,
)),
Positioned(
top: 40,
left: 100,
child: Column(
children: [
CircleAvatar(
radius: 100,
),
SizedBox(
height: 70,
),
Text(
"Dumasd Text A",
textAlign: TextAlign.center,
),
],
),
),
Align(
alignment: Alignment(.7, .25),
child: saveProfile(),
)
],
),
),
],
),
],
),
),
);
}
ButtonTheme saveProfile() {
return ButtonTheme(
minWidth: 100.0,
height: 38.0,
buttonColor: mainColor,
// ignore: deprecated_member_use
child: RaisedButton(
padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
textColor: Colors.white,
color: mainColor,
child: Text('Save'),
onPressed: () {}),
);
}
}
Play with Positioned and Alignment

How can i made this decoration?

Screen
Hello all, how can i make tis fade in ? between 2 container. I have a row with 3 columns and an another to columns.
This is my app :
class _FilmPageState extends State<FilmPage> {
final urlImage = "assets/images/Spider-Man No way home poster.jpg";
#override
Widget build(BuildContext context) => Scaffold(
drawer: NavigationMenu(),
// endDrawer: NavigationDrawerWidget(),
appBar: PreferredSize(
preferredSize: Size.fromHeight(270),
child: AppBar(
elevation: 0,
flexibleSpace: Image(
image: AssetImage(urlImage),
fit: BoxFit.cover,
),
),
),
body: Column(
children: [
FilmTitle(),
FilmSection(),
],
)
);
}
This is my film section, with the row, colums and containers :
Inside we have the details about the section, I want to know how can i make the border side decoration not full like a screen ?
class FilmSection extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
color: digital_blueb,
child: Column(
children: [
Row(
children: [
Column(
children: [
Container(
width: 70,
height: 125,
child: Center(
child: Text("85%", style: TextStyle(fontSize: 20, color: Colors.white)),
),
decoration: ShapeDecoration(
color: digital_blueb,
shape: CircleBorder(
side: BorderSide(
width: 5,
color: digital_green,
)
)
),
),
Container(
child: Center(
child: (Text("Note du public", style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold,fontSize: 15))
),
),
),
],
),
Column(
children: [
Container(
height: 110,
width: 50,
child: VerticalDivider(color: Colors.white),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
children: [
Text("2h30",style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold)),
],
),
),
SizedBox(height: 15),
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
children: [
Text("15 Décembre 2021", style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold)),
],
),
),
SizedBox(height: 15),
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
children: [
Text("Action/Aventure", style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold)),
],
),
),
SizedBox(height: 15),
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
children: [
Text("Tous publics", style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold)),
],
),
),
],
),
],
),

Try this, in your FilmTitle(), Stack a gradient color container:
Stack(
children:[
AspectRatio(
ratio: 1,
child: image.Network(''),
),
AspectRatio(
ratio: 1,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [
0.1,
0.7,
0.9,
],
colors: [
Colors.transparent,
Colors.transparent,
digital_blueb,
],
)
),
),
],
),

How to center text and prevent text from overflowing using Flutter

My UI currently looks like this:
I want to center the text in the middle of the space that is left over after the image is placed. However, I also want to make sure that my text does not overflow due to the size. How can I do that? My code is as follows:
Widget build(BuildContext context) {
return Card(
color: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
child: Column(
children: [
Divider(
thickness: 2,
color: Colors.white,
height: 0,
),
Row(
children: [
Container(
padding: EdgeInsets.all(0),
width: 100,
height: 100,
child: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage(imageUrl),
),
),
Container(
padding: EdgeInsets.all(40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
alignment: Alignment.topCenter,
child: Text(
name,
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
Container(
alignment: Alignment.bottomLeft,
padding: EdgeInsets.all(15),
child: Text(
modalityText,
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
),
),
],
),
),
],
),
],
),
);
}

Here, this is one way of doing what you want
Widget build(BuildContext context) {
return Card(
color: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
child: Column(
children: [
Divider(
thickness: 2,
color: Colors.white,
height: 0,
),
Row(
children: [
Container(
padding: EdgeInsets.all(0),
width: 100,
height: 100,
child: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage("imageUrl"),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
alignment: Alignment.topCenter,
child: Text(
"name",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
Container(
alignment: Alignment.bottomLeft,
padding: EdgeInsets.all(15),
child: Text(
"modalityText",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
),
),
],
),
),
),
],
),
],
),
);
}

Flutter Positioning Stack Complex Design

I am struggling with this, How Can I achieve this design? My code included stack widget with container background image but it's not showing properly.
I tried and it's showing like bellow image,
I want to design exactly like first image, I am stucking on positioning of small camera icon, background image, buy now banner etc, here's my code-
Stack(
children: [
Container(
decoration: new BoxDecoration(
// color: Colors.transparent,
image: new DecorationImage(
fit: BoxFit.fill,
image: new AssetImage(
'images/icons/egle2.png',
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
Stack(
alignment: Alignment.topCenter,
children: [
Container(
height: 100,
width: 100,
),
Positioned(
// right: 1.0,
child: Material(
elevation: 8.0,
color: Colors.blue,
shape: CircleBorder(),
child: CircleAvatar(
maxRadius: 50,
minRadius: 40,
backgroundColor: Colors.transparent,
backgroundImage: AssetImage(
'images/icons/jully.png'),
),
),
),
// SizedBox(
// width: 20,
// ),
Positioned(
right: 0.0,
top: 0.0,
child: Align(
alignment: Alignment.topRight,
child: Image.asset(
'images/icons/camera.png',
// height: ,
// width: 25,
),
),
),
],
),
SizedBox(
height: 5,
),
Text(
'Jully',
style: TextStyle(
color: Colors.white, fontSize: 18),
),
SizedBox(
height: 5,
),
GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(5),
height: 25,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.yellowColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Icon(
Icons.card_giftcard,
size: 15,
),
SizedBox(
width: 2,
),
Text(
'ID: 123875',
style: TextStyle(fontSize: 12),
),
],
),
),
),
SizedBox(
height: 200,
),
],
),
Column(
children: [
Stack(
alignment: Alignment.topCenter,
children: [
Container(
height: 100,
width: 100,
),
Positioned(
right: 1.0,
child: Material(
elevation: 8.0,
color: Colors.blue,
shape: CircleBorder(),
child: CircleAvatar(
maxRadius: 50,
minRadius: 40,
backgroundColor: Colors.transparent,
backgroundImage:
AssetImage('images/icons/king.png'),
),
),
),
SizedBox(
width: 20,
),
Positioned(
right: 0.0,
top: 0.0,
child: Align(
alignment: Alignment.topRight,
child: Image.asset(
'images/icons/camera.png',
// height: ,
// width: 25,
),
),
),
],
),
SizedBox(
height: 5,
),
Text(
'King_20',
style: TextStyle(
color: Colors.white, fontSize: 18),
),
SizedBox(
height: 5,
),
GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(5),
height: 25,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.yellowColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Icon(
Icons.card_giftcard,
size: 15,
),
SizedBox(
width: 2,
),
Text(
'ID: 123875',
style: TextStyle(fontSize: 12),
),
],
),
),
),
],
),
Column(
children: [
Stack(
alignment: Alignment.topCenter,
children: [
Container(
height: 100,
width: 100,
),
Positioned(
right: 1.0,
child: Material(
elevation: 8.0,
color: Colors.blue,
shape: CircleBorder(),
child: CircleAvatar(
maxRadius: 50,
minRadius: 40,
backgroundColor: Colors.transparent,
backgroundImage:
AssetImage('images/icons/hulk.png'),
),
),
),
SizedBox(
width: 20,
),
Positioned(
// top: 5.0,
right: 0.0,
child: Container(
child: Image.asset(
'images/icons/camera.png',
// height: ,
// width: 25,
),
),
),
],
),
SizedBox(
height: 5,
),
Text(
'Hulk',
style: TextStyle(
color: Colors.white, fontSize: 18),
),
SizedBox(
height: 5,
),
GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(5),
height: 25,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.yellowColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Icon(
Icons.card_giftcard,
size: 15,
),
SizedBox(
width: 2,
),
Text(
'ID: 123875',
style: TextStyle(fontSize: 12),
),
],
),
),
),
SizedBox(
height: 200,
),
// Stack(
// alignment: Alignment.topCenter,
// children: [
// Container(
// height: 100,
// width: 100,
// ),
// Positioned(
// right: 1.0,
// child: Material(
// elevation: 8.0,
// color: Colors.blue,
// shape: CircleBorder(),
// child: CircleAvatar(
// maxRadius: 50,
// minRadius: 40,
// backgroundColor: Colors.transparent,
// backgroundImage: AssetImage(
// 'images/icons/happyman.png'),
// ),
// ),
// ),
// SizedBox(
// width: 20,
// ),
// Positioned(
//// top: 5.0,
// right: 0.0,
// child: Container(
// child: Image.asset(
// 'images/icons/camera.png',
//// height: ,
//// width: 25,
// ),
// ),
// ),
// ],
// ),
// SizedBox(
// height: 5,
// ),
// Text(
// 'Happy Man',
// style: TextStyle(
// color: Colors.white, fontSize: 18),
// ),
// SizedBox(
// height: 5,
// ),
// GestureDetector(
// onTap: null,
// child: Container(
// padding: EdgeInsets.all(5),
// height: 25,
//// width: 30,
// decoration: BoxDecoration(
// color: UniversalVariables.yellowColor,
// borderRadius: BorderRadius.circular(4),
// ),
// child: Row(
// children: [
// Icon(
// Icons.card_giftcard,
// size: 15,
// ),
// SizedBox(
// width: 2,
// ),
// Text(
// 'ID: 123875',
// style: TextStyle(fontSize: 12),
// ),
// ],
// ),
// ),
// ),
],
),
],
),
),
Positioned.fill(
top: 280,
child: Container(
color: Colors.yellow,
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: Container(
child: Row(
children: [
Image.asset('images/icons/badge4.png',),
SizedBox(width: 10,),
Text(
"X 70 = \$10",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold),
),
],
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20),
child: GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(8),
height: 35,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.blackColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Text(
'Buy Now',
textAlign: TextAlign.center,
style:
TextStyle(color: Colors.white),
),
],
),
),
),
),
],
),
),
),
],
),

As usual, there might be better examples on how to achieve this result.
Here's a fast attempt to recreate it. It needs some fine tuning to fit any screen size, using AutoSizeText and rewriting PersonDrawer to be responsive too.
But I hope that it will help you to move in the right direction.
class MySuperCoolStackWidget extends StatelessWidget {
final double baseWidth = 520.0;
final double baseHeight = 345.0;
double fromWidth(double size, BoxConstraints constraints) {
return size / baseWidth * constraints.maxWidth;
}
double fromHeight(double size, BoxConstraints constraints) {
return size / baseHeight * constraints.maxHeight;
}
#override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: baseWidth / baseHeight,
child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.black,
),
),
AspectRatio(
aspectRatio: 520.0 / 260.0,
child: Container(
padding: EdgeInsets.fromLTRB(
fromWidth(20.0, constraints),
fromHeight(40.0, constraints),
fromWidth(20.0, constraints),
fromHeight(20.0, constraints),
),
child: LayoutBuilder(
builder: (_, innerConstraints){
return Row(
children: <Widget>[
Expanded(
child: PersonDrawer(),
),
SizedBox(
width: fromWidth(20.0, constraints),
),
Expanded(
child: Transform.translate(
offset: Offset(0.0, innerConstraints.maxHeight / 2.0),
child: PersonDrawer(),
),
),
SizedBox(
width: fromWidth(20.0, constraints),
),
Expanded(
child: PersonDrawer(),
),
],
);
},
),
),
),
Positioned(
left: 0,
right: 0,
bottom: fromHeight(20.0, constraints),
child: AspectRatio(
aspectRatio: 520.0 / 65.0,
child: Container(
padding: EdgeInsets.symmetric(
vertical: fromHeight(16.0, constraints),
horizontal: fromWidth(32.0, constraints),
),
color: Colors.orange[400],
child: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Icon(Icons.local_florist),
Text('x 70 = \$10'),
],
),
),
RaisedButton(
color: Colors.black,
textColor: Colors.white,
onPressed: () {},
child: Text('Buy now'),
),
],
),
),
),
),
],
);
},
),
);
}
}
class PersonDrawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white10,
border: Border.all(color: Colors.white12),
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: AspectRatio(
aspectRatio: 1.0,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
),
),
),
Positioned(
top: 5.0,
right: 5.0,
child: Icon(
Icons.camera,
color: Colors.white,
),
),
],
),
),
SizedBox(height: 5.0),
Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Text(
'King_20',
style: TextStyle(
color: Colors.white,
),
),
SizedBox(height: 5.0),
Container(
padding: EdgeInsets.all(2.0),
decoration: BoxDecoration(
color: Colors.orange[400],
borderRadius: BorderRadius.circular(5.0),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.perm_identity, size: 10.0),
Text(
'ID: 1234567',
style: TextStyle(
fontSize: 10.0,
),
),
],
),
),
],
),
)
],
),
);
}
}

Problem in set position with Stack and Positioned in flutter

I'm trying to make a card with "balloon" in top of card Here a example of what i'm trying to do
I'm doin'g in Flutter, the last update, i've tried add stack with positioned, but i got this horrible thing
My code about this is:
Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: Text('1'),
decoration:
BoxDecoration(color: Colors.redAccent, shape: BoxShape.circle),
),
Positioned(
left: 19,
top: 37,
child: Container(
height: 20,
width: 20,
color: Colors.green,
),
),
],
),
Card(
child: Container(
color: Colors.blue,
child: Text('aaaaaaaa'),
),
)
],
);
And my expected response was the link above

Please try this :-
Column(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
child: Column(
children: <Widget>[
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: Text('1'),
decoration: BoxDecoration(
color: Colors.redAccent, shape: BoxShape.circle),
),
Container(
height: 40,
width: 2,
color: Colors.green,
),
],
),
),
Container(
width: double.infinity,
child: Card(
child: Container(
color: Colors.blue,
child: Text('aaaaaaaa'),
),
),
)
],
)