I made this widget :
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 200,
height: 200,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.grey,
),
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 2.0,
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.red,
),
Container(
color: Colors.red,
),
Container(
color: Colors.red,
),
],
))
],
),
and this result is:
Now how can cut 4 square's edges according it's parent shape?
You can achieve this using ClipOval.
Wrap your grey container with it :
ClipOval(
child:Container(
//Your grey container
),
),
Related
I wanted to place two widgets (a text and a picture) inside a card, however the picture should go over the card as the image shows:
But I don't know how to make the picture overlapping the card.
This is my code:
Card(
margin: EdgeInsets.zero,
color: Theme.of(context).colorScheme.primary,
clipBehavior: Clip.antiAlias,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Row(
children: [
Container(
alignment: Alignment.bottomLeft,
margin: const EdgeInsets.all(12),
height: 70,
child: Text(
"This is a text widget.",
style: Theme.of(context).textTheme.bodyText1,
),
),
Image.asset(
'images/picture1.png',
scale: 5,
),
],
),
),
You can use stack widget along with positioned widget to achieve the UI
Stack
Card
Container
Card(
margin: EdgeInsets.zero,
color: Theme.of(context).colorScheme.primary,
clipBehavior: Clip.antiAlias,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Stack(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
alignment: Alignment.bottomLeft,
margin: const EdgeInsets.all(12),
height: 70,
child: Text(
"This is a text widget.",
style: Theme.of(context).textTheme.bodyText1,
),
),
Image.asset(
'images/picture1.png',
scale: 5,
),
],
),
],
),
),
you can use stack under card widget
I have no idea how to change the state of my grid view when a button is clicked can someone help me with this?
So, I have this textButton that should change the state of my grid view when clicked but I have no idea how to implement it. Below is my code.
From the image attached, when water, food, school etc are clicked the gridview should only provide specific organizations..
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(20.0),
child: ListView(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
padding: const EdgeInsets.only(left: 20, right: 20),
height: SizeConfig.screenHeight / 6.5,
color: kPrimaryColor,
child: Row(
children: [
const CircleAvatar(
radius: 40,
backgroundImage: AssetImage(
'assets/images/SDG Wheel_Transparent_WEB.png'),
),
const SizedBox(
width: 10,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Donate Today!",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontFamily: "Quicksand",
decoration: TextDecoration.none),
),
SizedBox(
height: 5,
),
Text(
"Small contributions quickly\nadd up if enough people\ntake up the cause.",
style: TextStyle(
color: Colors.white,
fontSize: 12,
decoration: TextDecoration.none),
),
],
),
Expanded(child: Container()),
Container(
width: 70,
height: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Color(0xFFf3fafc)),
child: Center(
child: IconButton(
icon: SvgPicture.asset("assets/icons/give.svg"),
onPressed: () {},
color: Color(0xFF69c5df),
//size: 30,
),
),
),
],
),
),
),
SizedBox(
height: 30,
),
const Align(
alignment: Alignment.centerLeft,
child: Text(
"Select your desired organisation to donate.",
style: TextStyle(
color: Color(0xFF1f2326),
fontSize: 15,
decoration: TextDecoration.none),
),
),
const Divider(color: Colors.black38),
//here is the textButton
Container(
height: 50,
width: double.infinity,
color: Colors.white,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
for (int i = 0; i < categories.length; i++)
Container(
width: 90,
padding: const EdgeInsets.only(left: 4.0, right: 4.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: kPrimaryColor,
),
child: TextButton(
onPressed: () {}, //here i need a way to change the state of
the grid view
child: Text(categories[i],
style: TextStyle(color: Colors.white)),
),
),
),
],
),
),
),
const Divider(color: Colors.black38),
const SizedBox(
height: 30,
),
GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: _listItem
.map((item) => Card(
color: Colors.transparent,
elevation: 0,
child: GestureDetector(
onTap: () => Navigator.pushNamed(context, item.route),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(item.image),
fit: BoxFit.cover)),
)),
))
.toList(),
)
],
),
);
}
}
Thanks very much.
The simplest things to do is to Filter your items based on selection by using the .where of Iterable https://api.flutter.dev/flutter/dart-core/Iterable/where.html
Basically when you push your Text button you store the type in a variable (you need a StatefulWidget for that)
then you can use where to filter your _listItem
GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: _listItem
.where((element) {
//if your element is included return true else false
return true;
})
.map((item) => Card(
color: Colors.transparent,
elevation: 0,
child: GestureDetector(
onTap: () => Navigator.pushNamed(context, item.route),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(item.image),
fit: BoxFit.cover)),
)),
))
.toList(),
)
You can check a sample here for the behavior on the button:
https://dartpad.dev/49f2e4818d933c75a0e6ed1d47a836d2
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
),
],
),
),
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.
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'),
),
),
)
],
)