'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'),
],
),
],
),
),
),
),
),
)
],
),
),
);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|