How to draw star with label in flutter - flutter

I am trying to draw *star in label as the image below
I have tried
Text("5 *",style: TextStyle(color: Colors.white, backgroundColor: Colors.green),)
But I don't know how I can embed *(Star) with label ?


you can use the icon class for that
Row(
children: [
Text("5),
Icon(Icons.star),
]
)


Container(
width: 80,
height:50,
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.green[700],
),
child: Row(
mainAxisAlignment:MainAxisAlignment.center,
children: [
Text('5',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
)),
SizedBox(width: 10),
Icon(Icons.star, color: Colors.white)
])),


Just check this code :
The star icon can be obtained using this plugin:
https://pub.dev/packages/material_design_icons_flutter#-readme-tab-
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.0),color: Colors.green),
width: 100,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('5',style: TextStyle(color: Colors.white),),
),
Icon(MdiIcons.star,color: Colors.white,),
],
),
),

Related

How I order my text and icon in a card (Flutter)

here is my currently code:
body: Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6)))
],
),
],
),
),
),
))),
but i want it like this:

The 2nd Column you have used should be a Row
body: Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,//this line is important for providing equal space
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6)))
],
),
],
),
),
),
))),

Card(
margin: const EdgeInsets.all(20),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Text',
style: TextStyle(fontSize: 18),
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"spots",
style: TextStyle(
color: Colors.black.withOpacity(0.6),
),
),
const Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 5,
),
const Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
],
),
),
),
),

return Scaffold(
body: Card(
margin: EdgeInsets.all(20),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Hi",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
Text("spots",
style:
TextStyle(color: Colors.black.withOpacity(0.6))),
Icon(
Icons.ice_skating,
size: 30,
color: Colors.black,
),
],
),
],
),
),
),
));
Output

How to align text in a way it starts from a margin in flutter?

How do i make the login text and sign in text to start from a single margin rather than the alignment it is shown in the picture?
Here the text isnt being aligned from a single margin and has off placement between texts
Code for it:
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(
width: double.infinity,
height: 200,
),
const Divider(
thickness: 3,
color: Colors.white,
indent: 160,
endIndent: 160,
),
Container(
decoration: const BoxDecoration(
color: Color.fromRGBO(32, 32, 32, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
),
width: double.infinity,
height: MediaQuery.of(context).size.height,
child: Align(
alignment: Alignment.topLeft,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
children: [
Text(
'Login',
textAlign: TextAlign.start,
style: GoogleFonts.inter(
textStyle: const TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
),
Text(
'Sign in to continue',
style: GoogleFonts.inter(
color: Color.fromRGBO(161, 161, 161, 1),
fontSize: 24,
fontWeight: FontWeight.w300),
)
],
),
)
],
),
),
),
],
),

Set the crossAxisAlignment property of the Column to start:
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...]
)

Add CrossAxisAlignment.start to immediate parent column of text.
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, //here
children: [
Text(
'Login',
),
Text(
'Sign in to continue',
)
],
),
)

Edit: should be crossAxisAlignment.
Set the mainAxisAlignment attribute for the Column:
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
...

Dart Flutter bears writing

I placed a post like this. When the text did not fit, it did not pass when it should have been on the bottom line.
Code:
body: Container(
padding: EdgeInsets.all(10),
child: Container(
height: 150,
decoration: BoxDecoration(
color: Colors.black
),
padding: EdgeInsets.all(10),
child: Container(
height: 180,
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
),
child: Row(
children: [
Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Soru sor, kazan", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),),
Text("SorSor! uygulaması ile soru sor, para kazan! Tek amacın yaşadığın sorunları soru olarak açmak ve diğer kullanıcıların sorularını yanıtlamak.", style: TextStyle(fontSize: 16, color: Colors.white),),
],
),
),
],
),
),
)
)
I want it to go to the bottom line when there is no space left. How can I do it?

Just remove the Row widget that you have above the Padding and the issue will gone.
Container(
height: 180,
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
),
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Soru sor, kazan",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Text(
"SorSor! uygulaması ile soru sor, para kazan! Tek amacın yaşadığın sorunları soru olarak açmak ve diğer kullanıcıların sorularını yanıtlamak.",
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),

How to position an Icon/Button at the Top Right corner of a Container in FLUTTER?

So this is my current home-screen and I'm trying to position the close button on the top-right corner of each container, which will end up deleting these chatrooms and I'm having some trouble figuring out how to do that. Below the image is my code.
child: Container(
decoration: BoxDecoration(
color: Color(0xff240046),
borderRadius: BorderRadius.circular(15)
),
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 18),
margin: EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(30),
child: profilePicUrl.isNotEmpty ? Image.network(
profilePicUrl,
height: 40,
width: 40,
) : null,
),
SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: TextStyle(
color: Color(0xff7b2cbf),
fontSize: 16),
),
SizedBox(height: 3),
Text(widget.lastMessage,
style: TextStyle(
color: Color(0xffd4d4d4),
),)
],
),
Column(
children: [
Align(
alignment: Alignment.topRight,
child: Icon(
Icons.close,
),
)
],
),
],
),
),
So.. how do I do it? Thanks in advance.

first of all the approach you are using is not readable, any ways to do it on top right, set mainAxisAlignment to MainAxisAlignment.start, then set crossAxisAlignment to CrossAxisAlignment.end. it looks like this:-
Column(
mainAxisAlignement : MainAxisAlignment.start,
crossAxisAlignement : CrossAxisAlignment.end,
children: [
Align(
alignment: Alignment.topRight,
child: Icon(
Icons.close,
),
)
],
),
now theres a best way to achieve this, its ListTile. it has leading property for left side, and title and subtitle, and then for right side widgets it has trailing property.
it looks like this:-
ListTile(
leading: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: profilePicUrl.isNotEmpty ? Image.network(
profilePicUrl,
height: 40,
width: 40,
) : null,
),
title: Text(
'name',
style: TextStyle(
color: Color(0xff7b2cbf),
fontSize: 16),
),
subtitle:Text('(widget.lastMessage)',
style: TextStyle(
color: Color(0xffd4d4d4),
), ),
trailing: Icon(
Icons.close,
),
),

Plase try with Stack
Container(
decoration: BoxDecoration(
color: Color(0xff240046),
borderRadius: BorderRadius.circular(15)
),
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 18),
margin: EdgeInsets.symmetric(vertical: 8),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: TextStyle(
color: Color(0xff7b2cbf),
fontSize: 16),
),
SizedBox(height: 3),
Text(widget.lastMessage,
style: TextStyle(
color: Color(0xffd4d4d4),
),)
],
),
Align(
alignment: Alignment.topRight,
child: Icon(
Icons.close,
),
),
],
),
)
ouput:

Align Items inside Row in flutter

I am new to flutter. I trying to design as in the image below. But I could not align the items inside the Row and could not give shape to like the layout below in the image. I have tried giving properties like mainAxisAlignment and crossAxisAlignment but could not get the expected result as in the image below.
Only I could able to get Image below.
I have implemented my code as follows:
Container(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(
Radius.circular(20))),
child: Image.network(
bannerWomenFashion[i],
height: 100,
width: 100,
fit: BoxFit.scaleDown,
)),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: CustomColor
.themeSecondary,
fontSize: 18,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text(
"The Pursuit of Happiness",
style: TextStyle(
color: Colors.blueGrey,
fontSize: 20,
fontWeight:
FontWeight.bold),
),
SizedBox(
height: 5,
),
Text("ID: #254217",
style: cartBlueGreyStyle),
],
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
decoration: BoxDecoration(
borderRadius:
BorderRadius
.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
color:
Colors.grey,
spreadRadius: 2),
],
),
child: Center(
child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
),
],
)),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.white,
spreadRadius: 2),
],
),
child: Center(
child: Icon(Icons.clear,
color: Colors.blueGrey),
)),
],
),
],
),
);

Container(
padding: EdgeInsets.all(32.0),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Stack(
overflow: Overflow.visible,
children: [
Container(
padding: EdgeInsets.all( 8.0),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Image.network(
'http://covertopia.com/wp-content/uploads/2015/05/000227_Alt.jpg'
/*bannerWomenFashion[i]*/,
height: 100,
fit: BoxFit.scaleDown,
)),
Positioned(
top: -12,
left: -12,
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.all(Radius.circular(12))),
child: Checkbox(
checkColor: Colors.white,
activeColor: Colors.green,
value: true,
onChanged: (value) {
print(value);
}),
),
)
],
),
SizedBox(
width: 10,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Rs 1200",
style: TextStyle(
color: Colors.red /*CustomColor
.themeSecondary*/
,
fontSize: 18,
fontWeight: FontWeight.bold),
),
SizedBox(height: 10,),
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"The Pursuit of Happiness",
style: TextStyle(color: Colors.blueGrey, fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
SizedBox(height: 10,),
Row(
children: [
Text("ID: #254217", style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold) /*cartBlueGreyStyle*/),
Spacer(),
Row(
children: <Widget>[
Icon(
Icons.remove,
size: 25,
color: Colors.blueGrey,
),
Container(
width: 30,
height: 25,
margin: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.blueGrey.withOpacity(0.1), spreadRadius: 2),
],
),
child: Center(child: Text("1"))),
Icon(
Icons.add,
size: 25,
color: Colors.blueGrey,
),
],
)
],
),
],
),
),
Container(
width: 30,
height: 30,
margin: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.white, spreadRadius: 2),
],
),
child: Center(
child: Icon(Icons.clear, color: Colors.blueGrey,size: 16,),
)),
],
),
),
);