Hello guys I was looking for something and dind't found any answer.
I'm trying to find something like position: absolute; background-image: radial-gradient(circle at 50% 48.193905%, rgb(13, 114, 255) 0%, transparent 100%); filter: brightness(109); to use in flutter, but with no success. My main problem is on the circle % and the brightness. Is flutter not providing these ?
Or is there any widget that allow us to do that?
Currently I'm using something like this
Container(
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [
myColor(fColor),
Color(0x00000000)
],
radius: 1.0,
),
),
);
Thanks you
For radial gradient, wrap your widget in a Container and pass a decoration -
Container(
decoration: BoxDecoration(
gradient: RadialGradient(...some configuration)
For filters, try using BackdropFilter. Check out the official flutter docs
For absolute positioning, you'd need a bit more. Use Stack and wrap its children with Align or Positioned.
You can move the gradient around using 'center' parameter to move it across x and y axis (x, y)
Example:
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [
Colors.black,
Colors.pink,
Colors.green,
Colors.orange,
],
center: Alignment(-0.5, -0.20), //(x,y)
// focal: Alignment(0.7, -0.01),
// focalRadius: 4.0,
),
You can also use focal and focalRadius parameters to adjust the focal. You can see more useful details on this link https://www.woolha.com/tutorials/flutter-using-radialgradient-examples
If you want to add an image on top of the gradient, you can do it with an Opacity and Stack Widget.
Example:
Stack(
children: [
Container(
height: 225,
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [
Colors.black,
Colors.orange,
Colors.pink,
Colors.green,
],
center: Alignment.topRight,
tileMode: TileMode.repeated,
),
borderRadius: BorderRadius.circular(
25.0,
),
border: Border.all(color: Colors.black),
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 5.0,
),
],
),
),
Stack(
children: [
Opacity(
opacity: 0.6,
child: Image(
width: MediaQuery.of(context).size.width,
image: AssetImage('lib/assets/imgs/example.jpg'),
fit: BoxFit.fill,
),
),
],
)
],
),
Related
I have a chat messenger screen which looks like the given screenshot .
As you can see , bottom message is hidden behind the text input area .
The messages are listview , built using streambuilder .
I want the messages above the text input area .
https://i.stack.imgur.com/A82X2.png
return Scaffold(
appBar: AppBarMain(context),
body: Container(
child: Stack(
children: [
chatMessageList(),
Positioned(
bottom: 0,
child: Container(
color: Color(0x54ffffff),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 14, vertical: 20),
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Expanded(
child: TextField(
controller: messageController,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: ' Message!...',
hintStyle: TextStyle(color: Colors.white54),
border: InputBorder.none),
),
),
InkWell(
onTap: () {
sendMessage();
},
child: Container(
padding: EdgeInsets.all(9),
height: 40,
width: 40,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0x36FFFFFF),
Color(0xFFFFFFFF)
],
),
borderRadius: BorderRadius.circular(40)),
child: Image.asset('assets/images/send.png')),
)
],
),
),
),
)
],
),
),
);
}
}
Your structure should be something like
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: chatMessageList(),
),
MessageFieldWidget(),
],
)
This will ensure that your chatMessageList will take up all of the space available in the screen and your Message Field will take up only the space that it needs. You don't need to use Positioned or Padding.
I have these "cards" with a defined height, but the text can be of different lengths. Basically, there is a title and a body, I want the title to be fully displayed (there is a limit of 50 chars) but here is the issue, the body text isn't taking the whole space and I can't manage to get it to work properly.
Here is how it looks
As you can see on the first card the title text is short so there is space for the body text to expand. On the second card, the title text is longer so if I increase the parent's height of the body text, it would overflow and push the button.
Here is the code
Column(
children: [
Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.only(
left: 12, top: 8.0, right: 12),
child: Text(document['titre'],
style: TextStyle(
color: Colors.white,
fontSize: 24)),
),
),
Container(
height: 33,
child: Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0),
child: Column(
children: [
Flexible(
child: Text(document['texte'],
overflow:
TextOverflow.ellipsis,
maxLines: 5,
style: TextStyle(
color: Colors.white)),
),
],
),
),
),
Spacer(),
Padding(
padding: const EdgeInsets.only(
left: 20.0, bottom: 10),
child: Align(
alignment: Alignment.bottomLeft,
child: SizedBox(
height: 30,
width: 120,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Color.fromRGBO(
255, 64, 0, 1.0),
onPrimary: Colors.white,
shape:
const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(
Radius.circular(10.0))),
),
onPressed: () {
var docid = document.id;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
Article(id: docid)));
},
child: Text("Lire la suite",
style: TextStyle(
color: Colors.white)),
),
),
),
)
],
)
If I remove the "maxLine" the text is only one line and if I change the container height it works but it pushes the button "Lire la suite" when the text is too long... I'm a bit stuck here
It is not good practice to use fixed sizes in your code so instead try to use MediaQuery of the context which is a very useful feature to avoid pixel overflows and make your UIs look good in different Screen Sizes.
height: MediaQuery.of(context).size.height * 0.9,
width: MediaQuery.of(context).size.width * 0.9,
You can set the a dynamic height and width by multiplying like so
for ex. .9 means 90% of your screen
I had a problem with my project, i'm trying make container with box shadow on bottom. below that container i want make to new container but they are some separate space between container, i think its because box shadow. so the question is how to make they connect ith no space but the shadow still visible.
pic
here my code :
return Scaffold(
body: SafeArea(
child: Container(
child: ListView(
physics: BouncingScrollPhysics(),
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(0.0),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.zero,
topRight: Radius.zero,
),
child: Container(
height: 70.0,
margin: const EdgeInsets.only(
bottom: 6.0), //Same as `blurRadius` i guess
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(5.5),
bottomRight: Radius.circular(5.5),
topLeft: Radius.zero,
topRight: Radius.zero,
),
color: kDarkGreenColor,
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
),
child: ListView.builder(
padding: EdgeInsets.only(left: 10, right: 5),
itemCount: planticos.length,
physics: BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.only(right: 15, bottom: 6),
height: 40,
width: 70,
decoration: BoxDecoration(
color: kMainColor.withOpacity(0),
image: DecorationImage(
image: AssetImage(planticos[index].image),
),
),
);
}),
),
),
),
),
Container(
margin: EdgeInsets.only(top: 0),
height: 200,
color: kMainColor,
),
],
),
),
),
);
}
use stack.
2nd Container will be visible over 1st Container.
for example...
Stack(
children: <Widget>[
Container(
height: 400,
decoration: BoxDecoration(
color: Colors.green,
),
),
Container(
height: 200,
decoration: BoxDecoration(
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.red,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
),
),
],
),
You should use the stack widget, see this example:
Stack(
children:[
Container() //which you wanna be under the shadow.
Container() //which you wanna make it's shadow visible.
]
)
Tip: Use Positioned() under the stack to specify the position of containers.
I just started learning Dart and Flutter development and have been playing with BoxShadow.
As you can see in the image below, the shadow for the Bar, Boo and Faz cards are cutoff while that for the text box shows up.
How do I ensure the shadows for the cards show up correctly?
Here's my code:
import 'package:flutter/material.dart';
import 'package:reminder_app/constants.dart';
class Body extends StatelessWidget {
Widget _buildBanner(size) {
return Container(
height: size.height * 0.7,
decoration: BoxDecoration(
color: kPrimaryColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
),
),
);
}
Widget _buildCard(text) {
return Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.teal[200],
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
offset: Offset(10, 10),
blurRadius: 25,
color: Colors.black.withOpacity(
0.75,
),
),
],
),
child: Text(text),
);
}
Widget _buildCardGrid() {
return Expanded(
child: GridView.count(
primary: false,
padding: EdgeInsets.symmetric(
vertical: kDefaultPadding * 1.5,
),
crossAxisSpacing: 20,
mainAxisSpacing: 20,
crossAxisCount: 2,
children: <Widget>[
_buildCard("Foo"),
_buildCard("Bar"),
_buildCard("Baz"),
_buildCard("Boo"),
_buildCard("Far"),
_buildCard("Faz"),
],
),
);
}
Widget _buildInputBox() {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
offset: Offset(10, 10),
blurRadius: 25,
color: Colors.black.withOpacity(
0.75,
),
),
],
),
height: 55,
child: TextField(
decoration: InputDecoration(
hintText: "Text Here",
hintStyle: TextStyle(
color: kPrimaryColor.withOpacity(
0.5,
),
),
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
);
}
Widget _buildInteractionContainers(size) {
return Positioned(
child: Container(
margin: EdgeInsets.symmetric(
horizontal: kDefaultPadding * 2,
),
width: size.width,
child: Column(
children: [
_buildInputBox(),
_buildCardGrid(),
],
),
),
);
}
Widget _buildBody(size) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: size.height * 0.7,
child: Stack(
children: <Widget>[
_buildBanner(size),
_buildInteractionContainers(size),
],
),
),
],
),
);
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return _buildBody(size);
}
}
Bar, Boo and Faz's shadows are cutoff while the shadow for the text box shows up
Edit [Answer]: I was able to fix this by adding clipBehavior: Clip.none to GridView to prevent shadow clipping.
Please try this code, To How to prevent box-shadow from being cut off?
If the box-shadow is muted, make sure that
overflow: visible
Is set to all div tags that contain your element.
I hope this information will be useful to you.
Thank you.
we can create the icon button with FlatButton.icon() but it requires label parameter.
we can also use IconButton() but it makes a circular icon button.
how to make a rectangle icon button like FlatButton() but with just icon in flutter?
Container(
height: 100.0,
width: 100.0,
child: FlatButton(
child: Icon(Icons.place),
onPressed: () {},
),
),
You can create a container with an icon as a child and wrap the container with the InkWell widget to make it clickable. This way you can shape your container to your need, which in this case is a rectangle.
Here's a code sample -
InkWell(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
border: Border.all(
width: 1,
)),
child: Icon(Icons.add, color: Colors.black),
),
onTap: () {},
),
Using Inkwell combination with container you can make customized button easily as done in above example
InkWell(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
border: Border.all(
width: 1,
)),
child: Icon(Icons.add, color: Colors.black),
),
onTap: () {},
),