how to create this with flutter? - flutter

how to create this with flutter ? please let me knw how to create like this category section using flutter because i want to create like this
i tried but i couldn't get the correct layout for that this is what i tried
Stack(children: [
Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Color(0xffCBCACD),
borderRadius: BorderRadius.circular(12),
),
width: 150,
height: 100,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Text(
indexCatName,
style: TextStyle(
fontWeight: FontWeight.bold),
),
Positioned(
top: 70,
left: 110,
child: Image(
width: 80,
image: NetworkImage(
'https://pizzafactory.lk/wp-content/uploads/2017/08/Pizza-Pollo-Alla-Diavola-300x300.png'),
),
),
],
)),
]);


Maybe like this :
Widget _test() {
return Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: Color(0xffCBCACD),
borderRadius: BorderRadius.circular(12),
),
width: 150,
height: 100,
child: Stack(children: [
Positioned(
top: 20,
left: 15,
child: Text(
'123',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Positioned(
bottom: -30,
right: -15,
child: Image(
width: 100,
image:
NetworkImage('https://pizzafactory.lk/wp-content/uploads/2017/08/Pizza-Pollo-Alla-Diavola-300x300.png'),
),
),
]),
);
}

Related

5 sized box in flutter and get error button overflow flutter

I have 5 sizedBox and each sizedbox has many widgets,sizedboxes are inside a container inside scaffold, when I run my application, got an message in emulator that :
Column(
children:[
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
],
),
Its one of my sized box
return Scaffold(
// resizeToAvoidBottomInset: false,
appBar: AppBar(
backgroundColor: ColorManager.mainDarkPrimary,
title: const Text(AppStrings.appName),
),
body: Column(
children: [
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(50),
),
color: ColorManager.darkPrimary,
),
child: Stack(
children: [
Positioned(
top: 80,
right: 0,
child: Container(
height: 80,
width: 300,
decoration: BoxDecoration(
color: ColorManager.white,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(50),
bottomLeft: Radius.circular(50),
),
),
),
),
Positioned(
top: 105,
right: 40,
child: Text(
AppStrings.appShorDescription,
style: TextStyle(
fontSize: FontSize.s20, color: ColorManager.darkGrey),
),
),
],
),
),
SizedBox(
height: height * 0.05,
),
Column(
children: [
SizedBox(
height: 110,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
top: 35,
right: 20,
child: Material(
child: Container(
height: 75.0,
width: width * 0.9,
decoration: BoxDecoration(
color: ColorManager.white,
borderRadius: BorderRadius.circular(0.0),
boxShadow: [
BoxShadow(
color: ColorManager.grey,
offset: const Offset(-10.0, 10.0),
blurRadius: 20.0,
spreadRadius: 4.0),
],
),
),
),
),
Positioned(
top: 0,
right: 30,
child: Card(
elevation: 10.0,
shadowColor: ColorManager.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 65,
width: 65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
AppStrings.mozafatiDatesUrl))),
),
),
),
Positioned(
top: 50,
right: 120,
// ignore: sized_box_for_whitespace
child: Container(
height: 60,
width: 160,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
(Text(
AppStrings.mozafatiDatesName,
style: TextStyle(
fontSize: FontSize.s16,
color: ColorManager.darkGrey,
fontWeight: FontWeightManager.bold),
)),
(Text(
AppStrings.mozafatiDatesName,
style: TextStyle(
fontSize: FontSize.s12,
color: ColorManager.darkGrey,
fontWeight: FontWeightManager.bold),
)),
Divider(
color: ColorManager.darkPrimary,
),
],
),
))
],
),
),
button overflow flutter
, a renderFlex overfloed by 146 pixels on the buttom
how can I place 5 sizedbox in scroll

Make your Column scrollable by wrapping it with a SingleChildScrollView:
SingleChildScrollView(
child: Column(
children: [SizedBox(), SizedBox()])
)

return Scaffold(
body: Container(
child: ListView(
shrinkWrap: true,
children: [
SizedBox(),
SizedBox(),
SizedBox(),
],
),
),
);

You can wrap Column with SingleChildScrollView widget
SingleChildScrollView(child:Column(
children:[
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
],
),)

How to set margin for children

I am new to flutter and I want to set top margin for image in the below code, how I can do that? Just designing a screen with text and image on the screen.
Here is my code:
Widget build(BuildContext context) {
SizeConfig().init(context);
return Container(
padding: new EdgeInsets.only(
top: 160,
left: SizeConfig.blockSizeHorizontal * 5,
right: SizeConfig.blockSizeHorizontal * 5),
decoration: BoxDecoration(
image: DecorationImage(
image: new AssetImage("images/bg_splash.png"),
fit: BoxFit.fill)),
child: Column(
children: [
Text(
"App is allowing users to learn & Grow their Brains",
textAlign: TextAlign.center,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 25.0,
color: Color(0xFFFDEA20),
fontFamily: "Calistoga",
),
),
Image(
image: AssetImage('images/logo.png'),
height: 175,
),
],
));
}

wrap your image widget with padding
Padding(
padding: const EdgeInsets.only(top:10),
child: Image(
image: AssetImage('images/logo.png'),
height: 175,
),
),

Add SizedBox(height: 10.0), with your requirement in column above Image() widget
return Container(
padding: new EdgeInsets.only(
top: 160,
left: SizeConfig.blockSizeHorizontal * 5,
right: SizeConfig.blockSizeHorizontal * 5),
decoration: BoxDecoration(
image:
DecorationImage(image: new AssetImage("images/bg_splash.png"), fit: BoxFit.fill)),
child: Column(
children: [
Text(
"App is allowing users to learn & Grow their Brains",
textAlign: TextAlign.center,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 25.0,
color: Color(0xFFFDEA20),
fontFamily: "Calistoga",
),
),
SizedBox(height: 10.0),
Image(
image: AssetImage('images/logo.png'),
height: 175,
),
],
));

Here are two solutions for this
wrap your image with padding
Padding(
padding: EdgeInsets.only(
bottom: 12,
top: 12,
left:10,
right:10),
child: Image(
image: const AssetImage("images/logo.png"),
width:125,
),
),
wrap your image with Container add margin property
Container(
margin: EdgeInsets.only(
left: 10,
right: 10,
bottom:10,
top:10),
child: Image(
image: const AssetImage("images/logo.png"),
width: MediaQuery.of(context).size.width * 0.25,
),
),

I want to position physical model in the middle of the screen irrespective of device physical model is moving up on some device

import 'package:flutter/material.dart';
class MainScreenCopy extends StatelessWidget {
const MainScreenCopy({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: [
Container(height: 1000, color: Colors.white),
Container(
color: Colors.lightBlue,
child: SafeArea(
child: Container(
height: 420,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
SizedBox(
width: 500,
),
SizedBox(
height: 150,
),
Row(
children: [
Text('Fleet status'),
],
),
SizedBox(
height: 80,
),
Row(
children: [
SizedBox(
width: 10,
),
Text('3'),
SizedBox(
width: 60,
),
Text('0'),
SizedBox(
width: 60,
),
Text('0'),
SizedBox(
width: 60,
),
Text('0'),
SizedBox(
width: 90,
),
Text('0')
],
),
SizedBox(height: 10),
Row(
children: [
Text('Total'),
SizedBox(
width: 25,
),
Text('Running'),
SizedBox(
width: 25,
),
Text('Idling'),
SizedBox(
width: 25,
),
Text('Stopped'),
SizedBox(
width: 25,
),
Expanded(child: Text('Disconnected')),
SizedBox(
width: 20,
),
],
),
SizedBox(
height: 30,
),
Row(
children: [
SizedBox(
width: 120,
height: 35,
child: ElevatedButton(
child: Row(
children: [
Icon(
Icons.location_on,
color: Colors.black,
),
SizedBox(
width: 8,
),
Text(
"Open Map",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 12),
)
],
),
style: ElevatedButton.styleFrom(
primary: Colors.orangeAccent,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(30))),
onPressed: () {},
),
),
SizedBox(
width: 130,
),
SizedBox(
width: 120,
height: 35,
child: ElevatedButton(
child: Row(
children: [
Icon(
Icons.menu,
color: Colors.black,
),
SizedBox(
width: 8,
),
Text(
"View List",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 12),
)
],
),
style: ElevatedButton.styleFrom(
primary: Colors.orangeAccent,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(30))),
onPressed: () {},
),
),
],
),
],
),
),
))),
Container(
child: SafeArea(
child: PhysicalModel(
elevation: 8,
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30)),
child: Container(
height: 120,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: [
SizedBox(
width: 500,
),
Row(
children: [
Icon(Icons.credit_card),
SizedBox(
width: 10,
),
Text('i ALERT'),
SizedBox(
width: 160,
),
Icon(Icons.search),
SizedBox(
width: 50,
),
Icon(Icons.notifications),
Icon(Icons.menu),
],
),
SizedBox(
height: 20,
),
Row(
children: [
Text("WELCOME, EXPRESSROADWAYS PVT LTD"),
],
),
]),
),
),
)),
),
Positioned(
left: 0,
right: 0,
top: 400,
child: Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Container(
child: PhysicalModel(
color: Colors.white,
elevation: 10,
borderRadius: BorderRadius.circular(10),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
SizedBox(
height: 10,
),
Row(
children: [
SizedBox(
width: 15,
),
Image(
height: 30,
width: 40,
image: AssetImage('images/taxi.png'),
),
SizedBox(
width: 15,
),
Image(
height: 30,
width: 40,
image: AssetImage('images/taxi.png'),
),
SizedBox(
width: 15,
),
Image(
height: 30,
width: 40,
image: AssetImage('images/taxi.png'),
),
SizedBox(
width: 15,
),
Image(
height: 30,
width: 40,
image: AssetImage('images/taxi.png'),
),
SizedBox(
width: 15,
),
Image(
height: 30,
width: 40,
image: AssetImage('images/taxi.png'),
),
SizedBox(
width: 15,
),
Image(
height: 30,
width: 40,
image: AssetImage('images/taxi.png'),
),
],
),
Row(
children: [
SizedBox(
width: 15,
),
Text(
'FLEET\nMANAGEMENT',
style: TextStyle(fontSize: 10),
),
SizedBox(
width: 2,
),
Text(
'TRIP\nLIST',
style: TextStyle(fontSize: 10),
),
SizedBox(
width: 15,
),
Text(
'FLEET\nINSIGHTS',
style: TextStyle(fontSize: 10),
),
SizedBox(
width: 10,
),
Text(
'GEOFENCE',
style: TextStyle(fontSize: 10),
),
SizedBox(
width: 20,
),
Text(
'POI',
style: TextStyle(fontSize: 10),
),
SizedBox(
width: 30,
),
Text(
'REPORT',
style: TextStyle(fontSize: 10),
),
],
),
],
),
),
),
),
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Container(
height: 220,
child: PhysicalModel(
color: Colors.white,
elevation: 10,
borderRadius: BorderRadius.circular(10),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Row(
children: [
Text('Fleet Alerts'),
],
),
SizedBox(
height: 5,
),
Row(
children: [
Image(
height: 50,
width: 60,
image: AssetImage('images/taxi.png'),
),
SizedBox(
width: 80,
),
Image(
height: 50,
width: 60,
image: AssetImage('images/taxi.png'),
),
SizedBox(
width: 80,
),
Image(
height: 50,
width: 60,
image: AssetImage('images/taxi.png'),
),
],
),
Row(
children: [
Text('Critical'),
SizedBox(
width: 100,
),
Text('Telltale'),
SizedBox(
width: 100,
),
Text('Warning'),
],
),
SizedBox(
width: 20,
),
Row(
children: [
Image(
height: 60,
width: 60,
image: AssetImage('images/taxi.png'),
),
SizedBox(
width: 80,
),
Image(
height: 60,
width: 60,
image: AssetImage('images/taxi.png'),
),
SizedBox(
width: 80,
),
Image(
height: 60,
width: 60,
image: AssetImage('images/taxi.png'),
),
],
),
Row(
children: [
Text('Geofence'),
SizedBox(
width: 85,
),
Text('Service'),
SizedBox(
width: 100,
),
Text('Events'),
],
),
],
),
),
),
),
),
)
],
),
),
);
}
}

How to put image on top corner and trim it in flutter?

In my mobile app I am expecting the tennis ball image to be there in right top corner
Image Expected
But currently it looks like this,
Image Current
the code is as below,
Expanded(
flex: 9,
child: Column(
children: [
Container(
height: 66,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
image: DecorationImage(
image: AssetImage(
'assets/transperent_tennis_ball_icon_green.png'),
),
),
),
]
),
)
Please advise how can I get this done?

Try below code hope its help to you. You used Stack widget and Positioned Widget for that. just replace my image with your image.
Center(
child: Stack(
children: [
Container(
padding: EdgeInsets.all(20),
height: 100,
width: 200,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Submit Score',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'Game Report',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
],
),
),
Positioned(
right: -30,
top: -30,
child: Image.network(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
height: 100,
width: 80,
),
),
],
),
),
Your result screen->

you can use stack
Expanded(
flex: 9,
child: Column(
children: [
Container(
height: 66,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
children: [
Positioned(
top:-25,
right:-25,
child: Container(
height: 66,
width:66,
decoration: BoxDecoration(
shape:BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage("https://picsum.photos/500/300?random=1"),
),
),
)
)
])
)]
),
),

just use stack widget to achive this design .

Flutter, Expanded Stack`s child cut/removed by other widget

Container(
padding:
EdgeInsets.only(left: 16, right: 20, top: 16, bottom: 16),
height: 68,
width: 200,
color: Colors.green,
child: Row(
children: [
Expanded(
child: Container(
child: Stack(
children: <Widget>[
Positioned(
// top: 16,
left: 0,
// height: 40,
// width: 40,
child: Container(
height: 36,
width: 60,
decoration: BoxDecoration(
color: Colors.black,
shape: BoxShape.circle,
),
),
),
],
),
),
),
SizedBox(
width: 4,
),
Container(
width: 120,
height: 30,
color: Colors.red,
),
],
),
)
The black circle is wrapped by Expanded
But the space is invaded by others
how to prevent this??
I'd rather this give overflow to the right without clipping my stack widget.

You can use Positioned in a container instead of circle.
Container(
padding: EdgeInsets.only(left: 16, right: 20, top: 16, bottom: 16),
height: 68,
width: double.infinity,
color: Colors.green,
child: Stack(
children: [
Container(
height: 36,
width: 60,
decoration: BoxDecoration(
color: Colors.black,
shape: BoxShape.circle,
),
),
Positioned(
left: 50,
top: 3,
child: Container(
width: MediaQuery.of(context).size.width-100,
height: 30,
color: Colors.red,
),
),
],
),
)
Output: