flutter grid view showing some spacing - flutter

I am using Gridview in my app I need to line horizontal and vertical. So I change the background color to grey but the issue it's showing some extra space how can I remove it?
Container(
color: Colors.grey,
child: GridView(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 2,
mainAxisSpacing: 2,
crossAxisCount: 4,
),
children: <Widget>[
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(height: Height * 0.01,),
Container(
height: Height * 0.04,
child: Image.asset('images/cat1.png'),
),
SizedBox(height: Height * 0.008,),
Text(
'Computer Hardware',
textAlign: TextAlign.center,
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(height: Height * 0.01,),
Container(
height: Height * 0.04,
child: Image.asset('images/cat2.png'),
),
SizedBox(height: Height * 0.008,),
Text('Computer Software',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(height: Height * 0.01,),
Container(
height: Height * 0.04,
child: Image.asset('images/cat3.png'),
),
SizedBox(height: Height * 0.008,),
Text('Internet', textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(height: Height * 0.01,),
Container(
height: Height * 0.04,
child: Image.asset('images/cat4.png'),
),
SizedBox(height: Height * 0.008,),
Text('Mobile / Table & iPad',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(height: Height * 0.01,),
Container(
height: Height * 0.04,
child: Image.asset('images/cat5.png'),
),
SizedBox(height: Height * 0.008,),
Text(
'Printer & Scanner',
textAlign: TextAlign.center,
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(height: Height * 0.01,),
Container(
height: Height * 0.04,
child: Image.asset('images/cat6.png'),
),
SizedBox(height: Height * 0.008,),
Text('CCTV Cameras', textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(height: Height * 0.01,),
Container(
height: Height * 0.04,
child: Image.asset('images/cat7.png'),
),
SizedBox(height: Height * 0.008,),
Text('Smart TV/Home Theater',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(height: Height * 0.01,),
Container(
height: Height * 0.04,
child: Image.asset('images/cat8.png'),
),
SizedBox(height: Height * 0.008,),
Text('E-Learning', textAlign: TextAlign.center)
],
),
),
],
),
),
You can see in the image its showing a grey color on top I need to remove this. I am not using any padding etc in container still its showing this


set gridview padding: const EdgeInsets.all(0)

Related

Flutter how to Fix container on a top

I don't use navbar in my app I have created a custom navbar but the issue is it's not fixed. mean when i scroll page navbar also scroll down. I need to fix it so it can be stick on top.
My code
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
enum BottomIcons { Home, Favorite, Search, Account }
class _HomeScreenState extends State<HomeScreen> {
double xOffset = 0;
double yOffset = 0;
double scaleFactor = 1;
bool isDrawerOpen = false;
int currentIndex = 0;
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
BottomIcons bottomIcons = BottomIcons.Home;
#override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double Height = MediaQuery.of(context).size.height;
double Width = MediaQuery.of(context).size.width;
var bottomNavigationBar;
return AnimatedContainer(
transform: Matrix4.translationValues(xOffset, yOffset, 0)
..scale(scaleFactor)
..rotateY(isDrawerOpen ? -0.5 : 0),
duration: Duration(milliseconds: 250),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(isDrawerOpen ? 40 : 0.0)),
child: Scaffold(
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Home;
});
},
bottomIcons:
bottomIcons == BottomIcons.Home ? true : false,
icons: EvaIcons.home,
text: "Home"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Favorite;
});
},
bottomIcons:
bottomIcons == BottomIcons.Favorite ? true : false,
icons: EvaIcons.heartOutline,
text: "Favorite"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Search;
});
},
bottomIcons:
bottomIcons == BottomIcons.Search ? true : false,
icons: EvaIcons.search,
text: "Search"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Account;
});
},
bottomIcons:
bottomIcons == BottomIcons.Account ? true : false,
icons: EvaIcons.personOutline,
text: "Account"),
],
),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: Height * 0.1,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/nav.png"),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
isDrawerOpen
? Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 0;
yOffset = 0;
scaleFactor = 1;
isDrawerOpen = false;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ross.png"),
),
),
),
),
)
: Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 280;
yOffset = 150;
scaleFactor = 0.6;
isDrawerOpen = true;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ic.png"),
),
),
),
),
),
Container(
width: Width * 0.25,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/logo.png"),
),
),
),
Row(
children: [
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i2.png"),
),
),
),
SizedBox(
width: Width * 0.04,
),
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i1.png"),
),
),
),
SizedBox(
width: Width * 0.06,
),
],
)
],
),
),
),
Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Popular ',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22)),
new TextSpan(
text: 'Categories',
style: TextStyle(fontSize: 18)),
],
),
),
Container(
width: Width * 0.1,
height: Height * 0.05,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/more.png"),
),
),
),
],
),
),
Container(
color: Color(0xffECF0F1),
padding: EdgeInsets.all(0),
child: GridView(
padding: EdgeInsets.all(0),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 1.5,
mainAxisSpacing: 1.5,
crossAxisCount: 4,
),
children: <Widget>[
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat1.png'),
),
SizedBox(
height: Height * 0.008,
),
Text(
'Computer Hardware',
textAlign: TextAlign.center,
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat2.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Computer Software',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat3.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Internet', textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat4.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Mobile / Table & iPad',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat5.png'),
),
SizedBox(
height: Height * 0.008,
),
Text(
'Printer & Scanner',
textAlign: TextAlign.center,
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat6.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('CCTV Cameras', textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat7.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Smart TV/Home Theater',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat8.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('E-Learning', textAlign: TextAlign.center)
],
),
),
],
),
),
SizedBox(
height: Height * 0.015,
),
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
),
items: imageSliders,
),
Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Service ',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22)),
new TextSpan(
text: 'Deals',
style: TextStyle(fontSize: 18)),
],
),
),
Container(
width: Width * 0.1,
height: Height * 0.05,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/see.png"),
),
),
),
],
),
),
Container(
width: double.infinity,
child: CarouselSlider(
options: CarouselOptions(
disableCenter: true,
enableInfiniteScroll: false,
viewportFraction: 0.7,
enlargeCenterPage: false,
height: Height * 0.21,
),
items: list
.map((item) => Container(
child: Image.asset(item),
))
.toList(),
)),
],
),
)));
}
}
This is my code I am using a simple column for the whole screen but the issue is in the column I need to fixed the container and scroll the other container.

The custom AppBar was a child of the SingleChildScrollView itself. Hence, it scrolled. Now, it is a child of a stack which persistently sticks to the top, hence won't scroll.
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
enum BottomIcons { Home, Favorite, Search, Account }
class _HomeScreenState extends State<HomeScreen> {
double xOffset = 0;
double yOffset = 0;
double scaleFactor = 1;
bool isDrawerOpen = false;
int currentIndex = 0;
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
BottomIcons bottomIcons = BottomIcons.Home;
#override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double Height = MediaQuery.of(context).size.height;
double Width = MediaQuery.of(context).size.width;
var bottomNavigationBar;
return AnimatedContainer(
transform: Matrix4.translationValues(xOffset, yOffset, 0)
..scale(scaleFactor)
..rotateY(isDrawerOpen ? -0.5 : 0),
duration: Duration(milliseconds: 250),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(isDrawerOpen ? 40 : 0.0)),
child: Scaffold(
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Home;
});
},
bottomIcons:
bottomIcons == BottomIcons.Home ? true : false,
icons: EvaIcons.home,
text: "Home"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Favorite;
});
},
bottomIcons:
bottomIcons == BottomIcons.Favorite ? true : false,
icons: EvaIcons.heartOutline,
text: "Favorite"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Search;
});
},
bottomIcons:
bottomIcons == BottomIcons.Search ? true : false,
icons: EvaIcons.search,
text: "Search"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Account;
});
},
bottomIcons:
bottomIcons == BottomIcons.Account ? true : false,
icons: EvaIcons.personOutline,
text: "Account"),
],
),
),
body: Stack(
children: [
Positioned.fill(
child: SingleChildScrollView(
child: Column(
children: [
Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Popular ',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22)),
new TextSpan(
text: 'Categories',
style: TextStyle(fontSize: 18)),
],
),
),
Container(
width: Width * 0.1,
height: Height * 0.05,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/more.png"),
),
),
),
],
),
),
Container(
color: Color(0xffECF0F1),
padding: EdgeInsets.all(0),
child: GridView(
padding: EdgeInsets.all(0),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 1.5,
mainAxisSpacing: 1.5,
crossAxisCount: 4,
),
children: <Widget>[
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat1.png'),
),
SizedBox(
height: Height * 0.008,
),
Text(
'Computer Hardware',
textAlign: TextAlign.center,
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat2.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Computer Software',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat3.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Internet', textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat4.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Mobile / Table & iPad',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat5.png'),
),
SizedBox(
height: Height * 0.008,
),
Text(
'Printer & Scanner',
textAlign: TextAlign.center,
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat6.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('CCTV Cameras', textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat7.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Smart TV/Home Theater',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat8.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('E-Learning', textAlign: TextAlign.center)
],
),
),
],
),
),
SizedBox(
height: Height * 0.015,
),
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
),
items: imageSliders,
),
Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Service ',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22)),
new TextSpan(
text: 'Deals',
style: TextStyle(fontSize: 18)),
],
),
),
Container(
width: Width * 0.1,
height: Height * 0.05,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/see.png"),
),
),
),
],
),
),
Container(
width: double.infinity,
child: CarouselSlider(
options: CarouselOptions(
disableCenter: true,
enableInfiniteScroll: false,
viewportFraction: 0.7,
enlargeCenterPage: false,
height: Height * 0.21,
),
items: list
.map((item) => Container(
child: Image.asset(item),
))
.toList(),
)),
],
),
),
),
Positioned(top: 0,left: 0, child: Container(
height: Height * 0.1,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/nav.png"),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
isDrawerOpen
? Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 0;
yOffset = 0;
scaleFactor = 1;
isDrawerOpen = false;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ross.png"),
),
),
),
),
)
: Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 280;
yOffset = 150;
scaleFactor = 0.6;
isDrawerOpen = true;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ic.png"),
),
),
),
),
),
Container(
width: Width * 0.25,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/logo.png"),
),
),
),
Row(
children: [
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i2.png"),
),
),
),
SizedBox(
width: Width * 0.04,
),
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i1.png"),
),
),
),
SizedBox(
width: Width * 0.06,
),
],
)
],
),
),
),),
],
)));
}
}

Flutter increase container height in a grid view

I am using a grid view i need to show a 3x3 container. The issue is i am not able to set the height of the container it's not increasing and cut the content.
My code
Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Service ',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22)),
new TextSpan(
text: 'Deals',
style: TextStyle(fontSize: 18)),
],
),
),
Container(
width: Width * 0.1,
height: Height * 0.05,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/see.png"),
),
),
),
],
),
),
Container(
child: GridView(
padding: EdgeInsets.all(0),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
children: [
Card(
child: Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: Height * 0.025,
child: Image.asset('images/heartfill.png'),
),
Container(
height: Height * 0.025,
color: Color(0xffD4E6F1),
child: Image.asset('images/add.png'),
)
],
),
Container(
height: Height * 0.11,
child: Image.asset('images/hp.png'),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text('\$45'),
),
Row(
children: [
Container(
height: Height * 0.02,
child: Image.asset('images/star.png'),
),
Container(
child: Text('4.4'),
)
],
)
],
),
)
],
),
),
)
],
),
)
I need to achieve this type of boxes
I have done something similar but its cropping the content i need to increase the height of my container Here is whats the issue

Just use childAspectRatio property of SliverGridDelegateWithFixedCrossAxisCount to set the ratio of the cross-axis to the main-axis extent of each child.
for ex
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio:0.8
),
It is actually the width to height ratio for child of grid view.Adjust it accordingly.

Flutter show a container in center of stack

I am using stack to show a container but there is one issue i need to show the small date container in mid of stack.
My code
Widget _buildListItem(int index) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: Container(
margin: EdgeInsets.only(left: width * 0.1),
child: Stack(
children: <Widget>[
Container(
width: width * 0.6,
height: height * 0.17,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/1.jpg',
),
fit: BoxFit.fill,
),
),
),
Padding(padding: EdgeInsets.only(top: height * 0.17),
child: Container(
height: height * 0.15,
color: Colors.white,
width: MediaQuery.of(context).size.width * 0.6,
child: Padding(
padding: const EdgeInsets.only(top: 7, bottom: 7, left: 7, right: 7),
child: Row(
children: <Widget>[
Column(crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
_events[index]['name'],
style: TextStyle(
color : Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 17
),
),
Text(
_events[index]['sentence'],
style: TextStyle(
color : Color(0xff808080),
fontSize: 15
),
textAlign: TextAlign.left,
),
Text(
'${_events[index]['date']} ${_events[index]['month']} ${_events[index]['year']}',
style: TextStyle(
color : Color(0xff808080),
fontSize: 15
),
textAlign: TextAlign.left,
),
],),
Spacer(),
Icon(Icons.favorite_border, size: 20, color : Color(0xff808080),),
],
),
),
),)
],
),
),
);
}
}
Here is the output of my code
I need something this in middle of image and content
Also one thing is there is any icon in flutter or we can add borders colors in the heart as in the second image heart icon?

Positioned widget helps you position the item which is in stack.
Use the Positioned.fill with Align inside a Stack:
Stack(
children: <Widget>[
Positioned.fill(
child: Align(
alignment: Alignment.centerRight,
child: ....
),
),
],
),

Positioned(
left:10,
right:0,
top:height * 0.14,
child:Container(
height:height *0.05
padding: EdgeInsets.symmetric(horizontal: 15,vertical: 10),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(15),
color:Colors.white
),
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children:<Widget>[
Text("8"),
Text("Jun")
]
)
)
)
add this to your stack as last child so its above other widgets and icon is Icons.favorite

Can i add radius button in singlechild scroll view?

I am using Stack widget in which I have 2 widgets one is just an image and the other is Singlechildscrollview.
I need to add a button on the footer of the screen and fix this (not moveable). Need to be fixed on screen when the Singlechildscrollview scroll or not I need to fix this button. I am not sure how can I do this because if I out the button in Singlechildscrollview then it will show only when I scroll. I need to fix when I scroll or not button should appear.
Here is my code:
Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(top: statusBarHeight * 0.8),
height: height * 0.4,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/place2.jpg',
),
fit: BoxFit.fill,
),
),
),
SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(top: height * 0.3),
child: SingleChildScrollView(
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: height * 0.05,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'NYC Food Festival',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 30),
),
),
SizedBox(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(left: width * 0.03),
child: Row(
children: <Widget>[
Icon(
Icons.calendar_today,
size: 20,
color: Color(0xff808080),
),
SizedBox(width: width * 0.02), // give it width
Column(
children: <Widget>[
Text(
'Sat, May 25, 2020',
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 15),
),
],
)
],
),
),
SizedBox(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(left: width * 0.03),
child: Row(
children: <Widget>[
Icon(
Icons.attach_money,
size: 20,
color: Color(0xff808080),
),
SizedBox(width: width * 0.02), // give it width
Column(
children: <Widget>[
Text(
'25,000 PKR',
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 15),
),
],
)
],
),
),
SizedBox(
height: height * 0.02,
),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'Snaps',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Container(
child: Column(
children: <Widget>[
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
),
items: imageSliders,
),
],
)),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'About',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Container(
padding: EdgeInsets.only(
right: width * 0.03, left: width * 0.03),
child: DescriptionTextWidget(
text:
"Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.")
),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'Included',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Included(),
SizedBox(
height: height * 0.01,
),
Included(),
SizedBox(
height: height * 0.01,
),
Included(),
SizedBox(
height: height * 0.01,
),
],
),
),
),
),
),
)
],
)
Here is the output of current view:
This is what I want:

You can achieve this look with relative ease.
Here is an example:
class BottomFadeButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
title: Text("Bottom Fade Button"),
),
body: Container(
// height: 500,
color: Colors.amberAccent,
child: Stack(
children: <Widget>[
Container(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text("Hello "),
);
}),
),
// Bottom Button
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: 100,
decoration: BoxDecoration(
// color: Color.fromARGB(110, 255, 255, 255),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
gradient: LinearGradient(
colors: [
Color.fromARGB(30, 255, 255, 255),
Color.fromARGB(255, 255, 255, 255),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Center(
child: InkWell(
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 100,
vertical: 20,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.blueAccent,
),
child: Text(
"BUY TICKETS",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
),
),
onTap: () {
return print("Tap");
},
),
),
),
),
],
),
),
),
);
}
}
Output:

yes you can add the button in stack and then wrap with align widget with alignment.bottom_center

Flutter gesturedetector not working in stack widget

I am using the stack widget to show the back arrow button on an image. And its showing but the problem is it's not tappable mean Gesturededector is not working on Stack.
My code
Stack(
children: <Widget>[
Container(
height: height * 0.4,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/place2.jpg',
),
fit: BoxFit.fill,
),
),
),
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => print("first container"),
child: Align(
alignment: Alignment.topLeft,
child: Container(
margin: EdgeInsets.only(left: width * 0.03),
padding: EdgeInsets.only(top: statusBarHeight * 2),
child: Icon(
Icons.arrow_back_ios,
size: 25,
color: Colors.white,
),
),
),
),
SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(top: height * 0.3),
child: SingleChildScrollView(
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: height * 0.05,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'NYC Food Festival',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 30),
),
),
SizedBox(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(left: width * 0.03),
child: Row(
children: <Widget>[
Icon(
Icons.calendar_today,
size: 20,
color: Color(0xff808080),
),
SizedBox(width: width * 0.02), // give it width
Column(
children: <Widget>[
Text(
'Sat, May 25, 2020',
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 15),
),
],
)
],
),
),
SizedBox(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(left: width * 0.03),
child: Row(
children: <Widget>[
Icon(
Icons.attach_money,
size: 20,
color: Color(0xff808080),
),
SizedBox(width: width * 0.02), // give it width
Column(
children: <Widget>[
Text(
'25,000 PKR',
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 15),
),
],
)
],
),
),
SizedBox(
height: height * 0.02,
),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'Snaps',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Container(
child: Column(
children: <Widget>[
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
),
items: imageSliders,
),
],
)),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'About',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Container(
padding: EdgeInsets.only(
right: width * 0.03, left: width * 0.03),
child: DescriptionTextWidget(
text:
"Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.")
),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'Included',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Included(),
SizedBox(
height: height * 0.01,
),
Included(),
SizedBox(
height: height * 0.01,
),
Included(),
SizedBox(
height: height * 0.01,
),
],
),
),
),
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: 100,
decoration: BoxDecoration(
// color: Color.fromARGB(110, 255, 255, 255),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
gradient: LinearGradient(
colors: [
Color.fromARGB(30, 255, 255, 255),
Color.fromARGB(255, 255, 255, 255),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Center(
child: InkWell(
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 80,
vertical: 20,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.blueAccent,
),
child: Text(
"BOOK NOW",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
),
),
onTap: () {
return print("Tap");
},
),
),
),
),
],
)
I need to use it as a back button when I navigate but it's not working then for testing I just print a value onTap but its also not working I try to add behaviour also.

Can you try putting GestureDectector after SingleChildScrollView in a stack.
I guess SingleChildScrollView is lying above GestureDetector since it is a stack.
SingleChildScrollView(),
GestureDetector(),