Center a Widget Inside a Column - user-interface

I'm having an issue trying to align a text widget in the center of a column using flutter. Here's a screenshot of my UI so far, and I want to align the texts below "por Anúncio" in the center of the container. I tried using the Align Widget, another Column, a Center, but nothing worked so far.
Here is a screenshot of what I have:
And this is my code so far:
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height - 80,
decoration: new BoxDecoration(
gradient: LinearGradient(colors: [
index == 0
? Colors.lightGreen
: index == 1
? Colors.lightBlue
: index == 2 ? Colors.orangeAccent : Color(0xff2F4858),
index == 0
? Colors.green
: index == 1
? Colors.blueAccent
: index == 2 ? Colors.deepOrange : Color(0xff04030F)
], begin: Alignment.topLeft, end: Alignment.bottomRight),
borderRadius: BorderRadius.circular(15.0),
),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Icon(
Icons.clear,
color: Colors.white,
)),
),
),
Text(
index == 0
? "Plano Pré Pago"
: index == 1
? "Plano Básico"
: index == 2 ? "Plano Intermediário" : "Plano Premium",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 26,
fontWeight: FontWeight.bold,
decoration: TextDecoration.none),
),
Padding(
padding: const EdgeInsets.fromLTRB(5, 5, 5, 0),
child: Text(
index == 0
? "R\$ 19,90"
: index == 1
? "R\$ 19,90"
: index == 2 ? "R\$ 37,90" : "R\$ 99,00",
textAlign: TextAlign.center,
style: GoogleFonts.nanumGothic(
color: Colors.white,
fontSize: 60,
fontWeight: FontWeight.bold,
decoration: TextDecoration.none),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 5, 0),
child: Text(
index == 0 ? "por Anúncio" : "Mensais",
textAlign: TextAlign.center,
style: GoogleFonts.nanumGothic(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
decoration: TextDecoration.none),
),
),
Container(
child: Center(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
"- 1 Anúncio Ativo\n- 1 Usuário\n- Notificação de interesses de compra\n- Válido para 30 dias",
textAlign: TextAlign.center,
style: GoogleFonts.nanumGothic(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w300,
decoration: TextDecoration.none),
),
),
),
),
],
),
);

You have to just add Expanded widget above and below You that Widget. Expanded widget will cover all possible hight so on both side you will get same space.
Expanded(
child : Container()
),
Container(
child: Center(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
"- 1 Anúncio Ativo\n- 1 Usuário\n- Notificação de interesses de compra\n- Válido para 30 dias",
textAlign: TextAlign.center,
style: GoogleFonts.nanumGothic(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w300,
decoration: TextDecoration.none),
),
),
),
),
Expanded(
child : Container()
),

Related

How to position an image at the top in a stack?

So I am trying to have an image at the top followed by a list below it. Intially, the list is contracted. When the list expands, I want it to overlap the image.
Initial Position - here I want the image to be at the top
Final Position - this is correct
The Problem is - If I position the image to the top, the list also moves to the top (in the initial position) which is not what I want. Also, if I use a column to position the image at the top (and the list below it) then the list does not expand all the way up to the top; it stays (and expands) below the image.
#override
Widget build(BuildContext context) {
double maxHeight = MediaQuery.of(context).size.height;
return Scaffold(
//resizeToAvoidBottomInset: false,
//backgroundColor: Color(0xFFd8e3e3),
body: Align(
child: SingleChildScrollView(
//to avoid bottom overflow error
child: Padding(
padding: const EdgeInsets.fromLTRB(5, 20, 5, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
//fit: StackFit.loose,
//alignment: Alignment.center,
children: [
// Positioned(
// top: 0,
// left: 0,
// right: 0,
Align(
alignment: Alignment(0, -1),
child: Hero(
tag: "imageHero",
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
),
child: Image.asset(
'assets/images/punjabi_egg_curry1.jpeg',
//height: screenHeight * 0.3,
//width: double.infinity,
alignment: Alignment.topCenter,
),
),
),
),
// ),
Center(
child: new ClipRect(
child: new BackdropFilter(
filter:
new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Card(
color: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: new Center(
//child: GestureDetector(
//onTap: _updateSize,
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Column(
children: [
AnimatedContainer(
constraints: BoxConstraints(
maxHeight: maxHeight * 0.85),
height: _height,
duration: Duration(milliseconds: 300),
decoration: new BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(20),
//border: Border.all(color: Colors.black),
),
child: Steps(),
),
//),
ElevatedButton(
onPressed: _updateSize,
child: Text(buttonText),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(
vertical: 10,
horizontal: 20,
),
primary: kSilver,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(20),
),
onPrimary: Colors.black,
textStyle: TextStyle(
color: Colors.black,
fontSize: 22,
),
),
),
],
),
),
),
),
),
),
),
// ),
],
),
],
),
),
),
),
//),
);
}
}
Wrap that widget with Positioned(top:5, child: // your widget ),
Try below code hope its help to you change your image on your need
Container(
height: 500,
child: Stack(
children: [
Container(
width: 150,
height: 150,
margin: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(
'assets/images/cycle.png',
),
),
),
),
Positioned(
top: 120,
left: 0,
right: 0,
child: Container(
height: 100,
child: ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text("List - $index"),
);
},
),
),
),
],
),
),
Your Result Screen ->

How to apply Linear gradient on box decoration in flutter?

Below is the UI that I want to build,
Currently, I have used linear gradient to achieve this. But the issue is the linear gradient disappears when I use image in the Box Decoration.
Below is the code,
child: Container(
padding: EdgeInsets.all(10.0),
height: 180,
child: Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: ColorSet.primaryGrey,
blurRadius: 5,
offset: Offset(0, 7),
),
],
gradient: LinearGradient(
colors: [ColorSet.primaryRed, Colors.transparent, Colors.transparent, ColorSet.primaryRed],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0, 0, 0.6, 1],
),
//On uncommenting the below three lines, I do not see the linear gradient
// image: DecorationImage(
// image: AssetImage("lib/assets/images/event.jpg"),
// fit: BoxFit.cover,
// ),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
//place this container to right side
constraints: BoxConstraints(maxWidth: 60.0),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.white.withOpacity(0.8)),
child: Row(
children: [
Icon(
CustomIcons.test,
color: ColorSet.primaryRed,
),
Text(
flames.toString(),
style: TextStyles.captionStyle.copyWith(
color: ColorSet.primaryRed,
fontWeight: FontWeight.bold,
fontSize: 17.0),
),
],
),
),
//display event name, start/end dates times and duration in a column
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('${name}',
style: TextStyles.titleStyle.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0)),
SizedBox(
height: 3.0,
),
],
),
],
),
),
),
Basically I need linear gradient to be displayed on the image. As mentioned in the above code (In comments), if I remove the image in Box Decoration, the linear gradient works perfectly fine. But on adding the image back, the linear gradient is missing. I guess the linear gradient is not applying on the image.
Kindly help!!
do something like this for gradient and background image.
Container(
decoration: BoxDecoration(
image:
DecorationImage(image: AssetImage(image), fit: BoxFit.cover)),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.black.withOpacity(.3),
Colors.black.withOpacity(.3),
]
)
),
)
)
A solution would be to Stack your current Container (with the LinearGradient and the Container child) on top of another Container defining the BoxShadow and the DecorationImage:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: 'Scan with Time',
home: Scaffold(
body: MyWidget(),
),
),
);
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10.0),
width: 240,
height: 480,
child: Stack(
children: [
Positioned.fill(
child: Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.blueGrey,
blurRadius: 5,
offset: Offset(0, 7),
),
],
image: DecorationImage(
image: NetworkImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Old_man_reading_news_paper_early_in_the_morning_at_Basantapur-IMG_6800.jpg/1280px-Old_man_reading_news_paper_early_in_the_morning_at_Basantapur-IMG_6800.jpg'),
fit: BoxFit.cover,
),
),
),
),
Positioned.fill(
child: Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
gradient: LinearGradient(
colors: [
Colors.red,
Colors.transparent,
Colors.transparent,
Colors.red
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0, 0, 0.6, 1],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
//place this container to right side
constraints: BoxConstraints(maxWidth: 240.0),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.white.withOpacity(0.8)),
child: Row(
children: [
Icon(
Icons.directions_bike,
color: Colors.red,
),
Text(
'5',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
fontSize: 17.0,
),
),
],
),
),
//display event name, start/end dates times and duration in a column
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('NAME',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0)),
SizedBox(
height: 3.0,
),
],
),
],
),
),
),
],
),
);
}
}
With help of card it is much easier
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: InkWell(
onTap: () => {},
child: Ink.image(
image: AssetImage(
'images/logo2.png',
),
fit: BoxFit.fill,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
);
}
I did this way
Instead of 2 widget I used 1 with foreground and decoration attributes
Container(
height: 150,
width: 150,
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.black.withOpacity(.0),
Colors.black.withOpacity(1),
],
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
image: DecorationImage(
image: AssetImage('images/logo2.png'),
),
),
),

How to add Shadow behind a Card in Flutter?

I am trying to achieve a shadow like this,
This is my attempt, but its not working:
SliverPadding(
padding: const EdgeInsets.only(top: 20, left: 10, right: 10),
sliver: SliverToBoxAdapter(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius:
20.0, // has the effect of softening the shadow
spreadRadius:
5.0, // has the effect of extending the shadow
offset: Offset(
20.0, // horizontal, move right 10
100.0, // vertical, move down 10
),
)
],
color: Colors.black,
),
height: 150,
width: MediaQuery.of(context).size.width,
child: Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
child: Center(
child: Text(
'Withdraw Money',
style: khomeStyle.copyWith(
fontSize: 18,
color: kWhite,
),
),
),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(
Radius.circular(14.0))),
height: 30,
width: 130),
)),
),
//Container(height: 90, color: Colors.red),
],
),
),
),
);
I cannot understand why isn't it working and the entire shadow is coming behind my Stack. Hoping someone can help me with this problem, I couldn't find a solution elsewhere.

How do I round the edges of this panel in Flutter?

I am using the https://pub.dev/packages/flutter_sliding_up_panel dependency and I want to round the edges of the panel below.
This is the code I am using
SlidingUpPanelWidget(
child: Column(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35.0),
topRight: Radius.circular(35.0),
),
child: Container(
color: Colors.red,
alignment: Alignment.center,
child: Row(
children: <Widget>[
Icon(
Icons.menu,
size: 30,
),
Padding(
padding: EdgeInsets.only(
left: 8.0,
),
),
Text(
'click or drag',
)
],
mainAxisAlignment: MainAxisAlignment.center,
),
height: 50.0,
),
),
Divider(
height: 0.5,
color: Colors.grey,
),
Flexible(
child: Container(
child: ListView.separated(
controller: scrollController,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return ListTile(
title: Text('list item $index'),
);
},
separatorBuilder: (context, index) {
return Divider(
height: 0.5,
);
},
shrinkWrap: true,
itemCount: 20,
),
color: Colors.white,
),
),
],
mainAxisSize: MainAxisSize.min,
),
controlHeight: 50.0,
anchor: 0.4,
panelController: panelController,
),
and this is what the collapsed panel currently looks like:
I want the entire panel to be as rounded as the red container.
You can't do it. The library has a hardcoded Material widget around the widget you give it.
The only thing you can do is to copy the whole library and modify it. It is a small library only has one file you need to copy.
At line 192 in the library you have this code:
child: Material(
key: _childKey,
color: Theme.of(context).backgroundColor,
elevation: widget.elevation,
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: widget.child,
),
),
Modify it like this:
child: Material(
key: _childKey,
color: Colors.transparent,
shadowColor: Colors.transparent,
elevation: widget.elevation,
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: widget.child,
),
),

How to prevent AppBar from covering the background?

I'm trying to implement a custom AppBar using a PreferredSize and a Card widget. Here is the result:
However, when I scroll down a bit, the AppBar layout is covering the background (which is the body part of the scaffold) like this:
See second screenshot:
The custom AppBar is covering everything that goes under it. Is there a way to prevent this?
By the way, these sample images came from a StreamBuilder widget attached to the body of the Scaffold.
Here is the code:
appBar: PreferredSize(
preferredSize: Size.fromHeight(50.0),
child: SizedBox(
height: 100.0,
child: Card(
elevation: 10.0,
color: Colors.white.withOpacity(0.8),
clipBehavior: Clip.antiAlias,
margin: EdgeInsets.only(top: 30.0, left: 10.0, right: 10.0),
child: Stack(
children: <Widget>[
GestureDetector(
onTap: () {
_key.currentState.openDrawer();
},
child: Padding(
padding: const EdgeInsets.only(top: 9.0, left: 10.0),
child: Icon(FontAwesomeIcons.bars, color: Colors.grey[800]),
),
),
Padding(
padding: const EdgeInsets.only(top: 13.0, left: 50.0),
child: TextField(
decoration: InputDecoration.collapsed(
hintText: 'Search... ',
hintStyle: TextStyle(fontFamily: 'Monospace')
),
),
),
GestureDetector(
onTap: () {
_key.currentState.openEndDrawer();
},
child: Padding(
padding: const EdgeInsets.only(top: 9.0, left: 305.0),
child: Icon(FontAwesomeIcons.slidersH, color: Colors.grey[800]),
),
)
],
),
),
)
),
Thanks for your answers!
Instead of setting your PreferredSize appbar directly to the appBar property of the Scaffold, rather Stack it within the body. This code should work for your desired outcome.
Scaffold(
body: Stack(
children: [
Container(), // this is where your main body goes
Positioned(
top: 30,
left: 10,
right: 10,
child: PreferredSize(
preferredSize: Size.fromHeight(25.0),
child: Container(
color: Colors.white.withOpacity(0.0),
height: 50.0,
child: Card(
elevation: 10.0,
color: Colors.white.withOpacity(1),
clipBehavior: Clip.antiAlias,
child: Stack(
children: <Widget>[
GestureDetector(
onTap: () {
_key.currentState.openDrawer();
},
child: Padding(
padding: const EdgeInsets.only(top: 9.0, left: 10.0),
child: Icon(Icons.menu, color: Colors.grey[800]),
),
),
Padding(
padding: const EdgeInsets.only(top: 13.0, left: 50.0),
child: TextField(
decoration: InputDecoration.collapsed(
hintText: 'Search... ',
hintStyle: TextStyle(fontFamily: 'Monospace')
),
),
),
GestureDetector(
onTap: () {
_key.currentState.openEndDrawer();
},
child: Padding(
padding: const EdgeInsets.only(top: 9.0, left: 305.0),
child: Icon(Icons.star, color: Colors.grey[800]),
),
)
],
),
),
)
),
),
]
),
);
Sample out come:

Resources