Problem in set position with Stack and Positioned in flutter - 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'),
),
),
)
],
)

Related

how to position an image on top of another "card"?

This is my first time here
I face a little problem which is the image that I wanted to put on top of the card do not work properly, the rest of it didn't display
I used (stack & positioned)
What should I do ??
Note : I'm beginner 👀
this is the code :
SizedBox(
width: 500,
height: 100,
child: Container(
child: Padding(
padding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Card(
color: Colors.grey.shade400,
child: Stack(children: [
Positioned(
bottom: 40,
left: 150,
child: CircleAvatar(
child: ClipOval(
child: Image.asset(
"assets/images/guy.jpg",
width: 100,
height: 100,
fit: BoxFit.cover,
),
),
backgroundColor: Colors.transparent,
radius: 50,
),
),
]),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
elevation: 10),
),
)),
and this is the the output :
enter image description here
and i wanted to be like this : enter image description here
if you want like that, then you need to put SizedBox and add size (height and or width) on it it acts as invicible widget to put space on it.
Stack
--Positioned (top 0)
----Column
------SizedBox (add height here around 50x50 px)
------Image (100x100 px)
--Card
Try below code hope its helpful to you. refer for thar Stack class here
Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10),
child: Container(
height: 320,
width: 420,
margin: EdgeInsets.all(16.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Your Other Widgets',
),
],
),
),
),
),
),
Container(
width: 50,
height: 50,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: Colors.transparent,
),
child: Padding(
padding: EdgeInsets.all(1),
child: DecoratedBox(
decoration: ShapeDecoration(
shape: CircleBorder(),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(
'assets/images/1.png',
),
),
),
),
),
)
],
),
Your Result screen->

making the circular avatar show at the top of the screen

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->

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
),
],
),
),

Force The Top Part Of The Screen's Widget to keep showing when Scrolling the ListviewItmes down, Flutter

may i ask how to force the top part of the screen not disappear when i scroll the listview down ?
as you can see here in this Photo
When i Scroll the ListView Down, then the top part, that contains the Player Widgets will disappear
so how can i please to force the Top Widgets to keep showing up when i scrolling down the Listview
Scaffold(
body: Container(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Center(
child: Container(
width: 200.0,
height: 150.0,
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color:Color(0xff193451).withOpacity(.5),
shape: BoxShape.circle),
child: Padding(
padding: const EdgeInsets.all(.0),
child: _buildRadialSeekBar(),
),
),
Center(
child: Container(
width: 150.0,
height: 150.0,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: ClipOval(
clipper: MClipper(),
child: Image.asset(
"assets/justine.jpg",
fit: BoxFit.cover,
),
),
),
),
)
],
),
),
),
Container(
// color: Colors.blue,
width: 350.0,
height: 100.0,
child: Stack(
children: <Widget>[
Center(
child: Container(
height: 65.0,
width: 290.0,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff193451), width: 3.0),
borderRadius: BorderRadius.circular(40.0)),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Row(
children: <Widget>[
Icon(Icons.fast_rewind,
size: 55.0, color: Color(0xff193451)),
Expanded(
child: Container(),
),
Icon(Icons.fast_forward,
size: 55.0, color: Color(0xff193451))
],
),
),
),
),
Align(
alignment: Alignment.center,
child: Container(
width: 92.0,
height: 92.0,
decoration: BoxDecoration(
color: Color(0xff193451), shape: BoxShape.circle),
child: IconButton(
icon: Icon(
Icons.play_arrow,
size: 45.0,
color: Colors.white,
),
onPressed: () {},
),
),
)
],
),
),
ListView(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
children: [
if(LocalUrl == "http://local") Container(child: ParseLocall(),),
if(LocalUrl == "http://music") Container(child: ParseMusicc(),),
if(LocalUrl == "http://talk") Container(child: ParseTalkk(),),
if(LocalUrl == "http://sports") Container(child: ParseSportss(),),
if(LocalUrl == "http://id=r0") Container(child: ParseByLocationn(),),
if(LocalUrl == "http://lang") Container(child: ParseLanguagess(),),
if(LocalUrl == "http://podcast") Container(child: ParseProdcastss(),),
],
),
],
),
));
Thanks in Advance
You can separate Justin part from your ListView and wrap them with a Column. Code needs some fixing still, but will be like that:
body: Container(
// Here is the Column!
child: Column(
children: [
// And here is the top part!
Center(
child: Container(
width: 200.0,
height: 150.0,
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color:Color(0xff193451).withOpacity(.5),
shape: BoxShape.circle),
child: Padding(
padding: const EdgeInsets.all(.0),
child: _buildRadialSeekBar(),
),
),
Center(
child: Container(
width: 150.0,
height: 150.0,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: ClipOval(
clipper: MClipper(),
child: Image.asset(
"assets/justine.jpg",
fit: BoxFit.cover,
),
),
),
),
)
],
),
),
),
ListView(
shrinkWrap: true,
children: <Widget>[
Container(
// color: Colors.blue,
width: 350.0,
height: 100.0,
child: Stack(
children: <Widget>[
Center(
child: Container(
height: 65.0,
width: 290.0,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xff193451), width: 3.0),
borderRadius: BorderRadius.circular(40.0)),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Row(
children: <Widget>[
Icon(Icons.fast_rewind,
size: 55.0, color: Color(0xff193451)),
Expanded(
child: Container(),
),
Icon(Icons.fast_forward,
size: 55.0, color: Color(0xff193451))
],
),
),
),
),
Align(
alignment: Alignment.center,
child: Container(
width: 92.0,
height: 92.0,
decoration: BoxDecoration(
color: Color(0xff193451), shape: BoxShape.circle),
child: IconButton(
icon: Icon(
Icons.play_arrow,
size: 45.0,
color: Colors.white,
),
onPressed: () {},
),
),
)
],
),
),
ListView(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
children: [
if(LocalUrl == "http://local") Container(child: ParseLocall(),),
if(LocalUrl == "http://music") Container(child: ParseMusicc(),),
if(LocalUrl == "http://talk") Container(child: ParseTalkk(),),
if(LocalUrl == "http://sports") Container(child: ParseSportss(),),
if(LocalUrl == "http://id=r0") Container(child: ParseByLocationn(),),
if(LocalUrl == "http://lang") Container(child: ParseLanguagess(),),
if(LocalUrl == "http://podcast") Container(child: ParseProdcastss(),),
],
),
],
),
],
),
));

Flutter Row with two container with centered image and text above it. Like in image attached

How to create Row with two containers with centered image and text above image also centered.
Like in image attached.
enter image description here
Is this what you are trying to do:
class ExampleDesign extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 180,
padding: EdgeInsets.symmetric(
horizontal: 5,
),
child: Row(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 60,
width: 120,
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.black,
),
),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Image'),
),
),
Text('Some text centered'),
],
),
),
),
SizedBox(
width: 20,
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 60,
width: 120,
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.black,
),
),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Image'),
),
),
Text('Some text centered'),
],
),
),
),
],
),
),
);
}
}
OUTPUT:
I hope this answers your question.
Create a widget using this post How to to display text over the images in Flutter? which returns an image above and a text below, Wrap two of these widgets using a Row. That should work.