Skip to content

Instantly share code, notes, and snippets.

@pmatatias

pmatatias/figmatoflutter.dart

Created November 17, 2023 10:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pmatatias/376d7112a7e952ebe48f72f410b29c26 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pmatatias/376d7112a7e952ebe48f72f410b29c26 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
figmatoflutter.dart
import 'package:flutter/material.dart';
void main() {
runApp(const FigmaToCodeApp());
}
// Generated by: https://www.figma.com/community/plugin/842128343887142055/
class FigmaToCodeApp extends StatelessWidget {
const FigmaToCodeApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: const Color.fromARGB(255, 18, 32, 47),
),
home: Scaffold(
body: ListView(children: [
Dashboard(),
]),
),
);
}
}
class Dashboard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 360,
height: 1453,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(color: Color(0xFF0443A1)),
child: Stack(
children: [
Positioned(
left: -134,
top: -102.50,
child: Container(
width: 540.04,
height: 926.50,
child: Stack(children: [
]),
),
),
Positioned(
left: 17,
top: 535,
child: Container(
width: 331,
height: 372,
decoration: ShapeDecoration(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
shadows: [
BoxShadow(
color: Color(0x3F000000),
blurRadius: 4,
offset: Offset(0, 4),
spreadRadius: 0,
)
],
),
child: Stack(
children: [
Positioned(
left: 43,
top: 112,
child: Container(
width: 246,
height: 246,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 246,
height: 246,
decoration: ShapeDecoration(
color: Color(0xFF0443A1),
shape: OvalBorder(),
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 246,
height: 246,
decoration: ShapeDecoration(
color: Color(0xFFF1EFEF),
shape: OvalBorder(),
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 246,
height: 246,
decoration: ShapeDecoration(
color: Color(0xFF0422C3),
shape: OvalBorder(),
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 246,
height: 246,
decoration: ShapeDecoration(
color: Color(0xFF2447FF),
shape: OvalBorder(),
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 246,
height: 246,
decoration: ShapeDecoration(
color: Color(0xFF5585FF),
shape: OvalBorder(),
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 246,
height: 246,
decoration: ShapeDecoration(
color: Color(0xFFBEBABA),
shape: OvalBorder(),
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 246,
height: 246,
decoration: ShapeDecoration(
color: Color(0xFFB4C9FF),
shape: OvalBorder(),
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 246,
height: 246,
decoration: ShapeDecoration(
color: Color(0xFFDAD7D7),
shape: OvalBorder(),
),
),
),
],
),
),
),
Positioned(
left: 23,
top: 12,
child: Container(
width: 289,
height: 82,
child: Stack(
children: [
Positioned(
left: 0,
top: 29,
child: Container(
width: 250,
height: 53,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFF0443A1),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 0,
top: 30,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFF0422C3),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 80,
top: 2,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFF2447FF),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 80,
top: 32,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFF5585FF),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 157,
top: 3,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFFB5C9FF),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 157,
top: 33,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFFBEBABA),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 230,
top: 3,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFFDAD8D8),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 230,
top: 33,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFFF1F0F0),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
],
),
),
),
Positioned(
left: 0,
top: 0,
child: Text(
'POWER RACK CONSUMTIONS',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 28,
top: 33,
child: Text(
'150W',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 184,
top: 36,
child: Text(
'150W',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 28,
top: 62,
child: Text(
'150W',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 184,
top: 65,
child: Text(
'150W',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 105,
top: 33,
child: Text(
'150W',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 260,
top: 36,
child: Text(
'150W',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 105,
top: 63,
child: Text(
'150W',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 260,
top: 66,
child: Text(
'150W',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 6,
top: 31,
child: Text(
'1',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 162,
top: 34,
child: Text(
'5',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 5,
top: 60,
child: Text(
'2',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 162,
top: 63,
child: Text(
'6',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 85,
top: 32,
child: Text(
'3',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 236,
top: 33,
child: Text(
'7',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 84,
top: 62,
child: Text(
'4',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 236,
top: 64,
child: Text(
'8',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
),
Positioned(
left: 117,
top: 214,
child: Text(
'1350W',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 30,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
),
Positioned(
left: 17,
top: 345,
child: Container(
width: 162,
height: 84,
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
shadows: [
BoxShadow(
color: Color(0x3F000000),
blurRadius: 4,
offset: Offset(0, 4),
spreadRadius: 0,
)
],
),
child: Stack(
children: [
Positioned(
left: 11,
top: 9,
child: Text(
'TEMPERATURE ',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 15,
top: 57,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Text(
'NORMAL',
style: TextStyle(
color: Color(0xFF6F6C6C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 51,
top: 0,
child: Text(
'32 C',
style: TextStyle(
color: Color(0xFF6F6C6C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
Positioned(
left: 15,
top: 28,
child: Text(
'38 C',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 104,
top: 28,
child: Container(
width: 47,
height: 38.64,
child: Stack(children: [
]),
),
),
Positioned(
left: 116,
top: 16,
child: Text(
'10%',
style: TextStyle(
color: Colors.black,
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
),
Positioned(
left: 17,
top: 439,
child: Container(
width: 162,
height: 84,
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
shadows: [
BoxShadow(
color: Color(0x3F000000),
blurRadius: 4,
offset: Offset(0, 4),
spreadRadius: 0,
)
],
),
child: Stack(
children: [
Positioned(
left: 11,
top: 9,
child: Text(
'AIR PREASURE',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 15,
top: 57,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Text(
'NORMAL',
style: TextStyle(
color: Color(0xFF6F6C6C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 51,
top: 0,
child: Text(
'50',
style: TextStyle(
color: Color(0xFF6F6C6C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
Positioned(
left: 15,
top: 28,
child: Text(
'12',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 113,
top: 21,
child: Text(
'65%',
style: TextStyle(
color: Colors.black,
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
),
Positioned(
left: 188,
top: 343,
child: Container(
width: 160,
height: 84,
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
shadows: [
BoxShadow(
color: Color(0x3F000000),
blurRadius: 4,
offset: Offset(0, 4),
spreadRadius: 0,
)
],
),
child: Stack(
children: [
Positioned(
left: 11,
top: 9,
child: Text(
'HUMIDITY ',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 15,
top: 57,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Text(
'NORMAL',
style: TextStyle(
color: Color(0xFF6F6C6C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 51,
top: 0,
child: Text(
'25%',
style: TextStyle(
color: Color(0xFF6F6C6C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
Positioned(
left: 15,
top: 28,
child: Text(
'26%',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 97,
top: 26.55,
child: Container(
width: 49,
height: 40.28,
child: Stack(children: [
]),
),
),
Positioned(
left: 113,
top: 16,
child: Text(
'1%',
style: TextStyle(
color: Colors.black,
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
),
Positioned(
left: 187,
top: 439,
child: Container(
width: 161,
height: 84,
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
shadows: [
BoxShadow(
color: Color(0x3F000000),
blurRadius: 4,
offset: Offset(0, 4),
spreadRadius: 0,
)
],
),
child: Stack(
children: [
Positioned(
left: 11,
top: 9,
child: Text(
'SMOKE',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 15,
top: 57,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Text(
'NORMAL',
style: TextStyle(
color: Color(0xFF6F6C6C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 51,
top: 0,
child: Text(
'0',
style: TextStyle(
color: Color(0xFF6F6C6C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
Positioned(
left: 15,
top: 28,
child: Text(
'0',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 113,
top: 21,
child: Text(
'0%',
style: TextStyle(
color: Colors.black,
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
),
Positioned(
left: 161,
top: 82,
child: Container(
width: 211.12,
height: 70.25,
child: Stack(
children: [
Positioned(
left: 60,
top: 3,
child: Text(
'POWER',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontStyle: FontStyle.italic,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 42,
top: 40,
child: SizedBox(
width: 169.12,
height: 30.25,
child: Text(
'CONTAINMENT',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 20,
fontStyle: FontStyle.italic,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
),
Positioned(
left: 153,
top: 32,
child: Text(
'SYSTEM',
style: TextStyle(
color: Color(0xFFF5F5F5),
fontSize: 8,
fontStyle: FontStyle.italic,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 157,
top: 0,
child: SizedBox(
width: 36,
height: 29,
child: Text(
'IT',
style: TextStyle(
fontSize: 32,
fontStyle: FontStyle.italic,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
),
Positioned(
left: 36,
top: 40,
child: Container(
width: 114,
height: 5,
decoration: BoxDecoration(color: Color(0xFFF5F5F5)),
),
),
Positioned(
left: 12,
top: 40,
child: Container(
width: 6,
height: 5,
decoration: BoxDecoration(color: Color(0xFFF5F5F5)),
),
),
Positioned(
left: 24,
top: 40,
child: Container(
width: 5,
height: 5,
decoration: BoxDecoration(color: Color(0xFFF5F5F5)),
),
),
Positioned(
left: 0,
top: 40,
child: Container(
width: 6,
height: 5,
decoration: BoxDecoration(color: Color(0xFFF5F5F5)),
),
),
],
),
),
),
Positioned(
left: 20,
top: 919,
child: Container(
width: 328,
height: 189,
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
shadows: [
BoxShadow(
color: Color(0x3F000000),
blurRadius: 4,
offset: Offset(0, 4),
spreadRadius: 0,
)
],
),
child: Stack(
children: [
Positioned(
left: 9,
top: 81,
child: Container(
width: 313,
height: 92,
child: Stack(children: [
]),
),
),
Positioned(
left: 24,
top: 12,
child: SizedBox(
width: 240,
height: 31,
child: Text(
'POWER CONSUMTIONS CHART',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
),
Positioned(
left: 21,
top: 161,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Text(
'00:00',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 37,
top: 0,
child: Text(
'00:03',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 74,
top: 0,
child: Text(
'00:06',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 111,
top: 0,
child: Text(
'00:09',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 148,
top: 0,
child: Text(
'00:12',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 181,
top: 0,
child: Text(
'00:15',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 215,
top: 0,
child: Text(
'00:18',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 249,
top: 0,
child: Text(
'00:21',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
Positioned(
left: 13,
top: 179,
child: Transform(
transform: Matrix4.identity()..translate(0.0, 0.0)..rotateZ(-1.57),
child: Container(
width: 126,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2,
strokeAlign: BorderSide.strokeAlignCenter,
color: Color(0xFF868383),
),
),
),
),
),
),
Positioned(
left: 6,
top: 92,
child: Container(
width: 307,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2,
strokeAlign: BorderSide.strokeAlignCenter,
color: Color(0xFF868383),
),
),
),
),
),
Positioned(
left: 541,
top: 139,
child: Container(
width: 25,
height: 25,
decoration: ShapeDecoration(
color: Color(0xFFD9D9D9),
shape: OvalBorder(),
shadows: [
BoxShadow(
color: Color(0x3F000000),
blurRadius: 4,
offset: Offset(0, 4),
spreadRadius: 0,
)
],
),
),
),
Positioned(
left: 549,
top: 147,
child: Container(
width: 9,
height: 9,
decoration: ShapeDecoration(
color: Color(0xFF2447FF),
shape: OvalBorder(),
),
),
),
],
),
),
),
Positioned(
left: 0,
top: 96,
child: Container(
width: 158,
height: 34,
decoration: ShapeDecoration(
color: Color(0xCCD9D9D9),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
),
),
),
Positioned(
left: 15,
top: 101,
child: Text(
'DASHBOARD',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF1B2453),
fontSize: 20,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 20,
top: 1120,
child: Container(
width: 328,
height: 316,
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Color(0xFFF5F5F5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
child: Stack(
children: [
Positioned(
left: 24,
top: 14,
child: Text(
'RACK STATUS',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 22,
top: 40,
child: Container(
width: 260,
height: 253,
child: Stack(
children: [
Positioned(
left: 6,
top: 23,
child: Container(
width: 20,
height: 230,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFF0443A1),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 0,
top: 30,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFF0422C3),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 0,
top: 60,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFF2447FF),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 0,
top: 90,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFF5585FF),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 0,
top: 120,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFFB5C9FF),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 0,
top: 150,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFFBEBABA),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 0,
top: 180,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFFDAD8D8),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 0,
top: 210,
child: Container(
width: 20,
height: 20,
decoration: ShapeDecoration(
color: Color(0xFFF1F0F0),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
],
),
),
),
Positioned(
left: 10,
top: 24,
child: Text(
'4',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 10,
top: 144,
child: Text(
'4',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 10,
top: 54,
child: Text(
'4',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 10,
top: 174,
child: Text(
'4',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 10,
top: 84,
child: Text(
'4',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 10,
top: 204,
child: Text(
'4',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 10,
top: 114,
child: Text(
'4',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 10,
top: 234,
child: Text(
'4',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 0,
top: 0,
child: Text(
'DEVICE',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 54,
top: 0,
child: Text(
'NO RACK',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 142,
top: 0,
child: Text(
'STATUS',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 223,
top: 0,
child: Text(
'ALARM',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 59,
top: 27,
child: Text(
'RACK1',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 143,
top: 27,
child: Text(
'ONLINE',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 143,
top: 57,
child: Text(
'ONLINE',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 143,
top: 87,
child: Text(
'ONLINE',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 143,
top: 117,
child: Text(
'ONLINE',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 143,
top: 147,
child: Text(
'ONLINE',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 143,
top: 177,
child: Text(
'ONLINE',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 143,
top: 207,
child: Text(
'ONLINE',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 143,
top: 237,
child: Text(
'ONLINE',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 59,
top: 147,
child: Text(
'RACK5',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 59,
top: 57,
child: Text(
'RACK2',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 59,
top: 177,
child: Text(
'RACK6',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 59,
top: 87,
child: Text(
'RACK3',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 59,
top: 207,
child: Text(
'RACK7',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 59,
top: 117,
child: Text(
'RACK4',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 59,
top: 237,
child: Text(
'RACK8',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF868383),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
],
),
),
),
Positioned(
left: 247,
top: 66,
child: Container(
width: 34,
height: 13,
decoration: ShapeDecoration(
color: Color(0xFF23FF00),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 247,
top: 96,
child: Container(
width: 34,
height: 13,
decoration: ShapeDecoration(
color: Color(0xFFFF0000),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 247,
top: 126,
child: Container(
width: 34,
height: 13,
decoration: ShapeDecoration(
color: Color(0xFF23FF00),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 247,
top: 156,
child: Container(
width: 34,
height: 13,
decoration: ShapeDecoration(
color: Color(0xFF23FF00),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 247,
top: 186,
child: Container(
width: 34,
height: 13,
decoration: ShapeDecoration(
color: Color(0xFF23FF00),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 247,
top: 216,
child: Container(
width: 34,
height: 13,
decoration: ShapeDecoration(
color: Color(0xFF23FF00),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 247,
top: 246,
child: Container(
width: 34,
height: 13,
decoration: ShapeDecoration(
color: Color(0xFF23FF00),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
Positioned(
left: 247,
top: 276,
child: Container(
width: 34,
height: 13,
decoration: ShapeDecoration(
color: Color(0xFF23FF00),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
),
),
],
),
),
),
Positioned(
left: 19,
top: 159,
child: Container(
width: 333,
height: 173,
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Color(0xFFF5F5F5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
child: Stack(
children: [
Positioned(
left: 22,
top: 37,
child: Container(
width: 268,
height: 121,
child: Stack(
children: [
Positioned(
left: 1,
top: 1,
child: Text(
'FRONT DOOR',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 1,
top: 25,
child: Text(
'BACK DOOR',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 1,
top: 51,
child: Text(
'WINDOW',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 0,
top: 76,
child: Text(
'ALARM',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 1,
top: 101,
child: Text(
'LIGHTING',
style: TextStyle(
color: Color(0xFF868383),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 182,
top: 0,
child: Container(
width: 86,
height: 121,
child: Stack(
children: [
Positioned(
left: 1,
top: 1,
child: Text(
'OPEN',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 1,
top: 25,
child: Text(
'OPEN',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 1,
top: 51,
child: Text(
'CLOSE',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 0,
top: 78,
child: Text(
'OPEN',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 1,
top: 103,
child: Text(
'CLOSE',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 65,
top: 0,
child: Container(
width: 21,
height: 21,
decoration: ShapeDecoration(
color: Color(0xFF23FF00),
shape: OvalBorder(),
),
),
),
Positioned(
left: 65,
top: 24,
child: Container(
width: 21,
height: 21,
decoration: ShapeDecoration(
color: Color(0xFF23FF00),
shape: OvalBorder(),
),
),
),
Positioned(
left: 65,
top: 50,
child: Container(
width: 21,
height: 21,
decoration: ShapeDecoration(
color: Color(0xFFFF0000),
shape: OvalBorder(),
),
),
),
Positioned(
left: 65,
top: 75,
child: Container(
width: 21,
height: 21,
decoration: ShapeDecoration(
color: Color(0xFF23FF00),
shape: OvalBorder(),
),
),
),
Positioned(
left: 65,
top: 100,
child: Container(
width: 21,
height: 21,
decoration: ShapeDecoration(
color: Color(0xFFFF0000),
shape: OvalBorder(),
),
),
),
],
),
),
),
],
),
),
),
Positioned(
left: 22,
top: 12,
child: Text(
'NAME',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 201,
top: 12,
child: Text(
'STATUS',
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 21,
top: 32,
child: Container(
width: 275,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 1,
strokeAlign: BorderSide.strokeAlignCenter,
),
),
),
),
),
],
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 362,
height: 75,
child: Stack(
children: [
Positioned(
left: 0,
top: 35,
child: Container(
width: 362,
height: 40,
decoration: BoxDecoration(color: Color(0xFF1B2453)),
),
),
Positioned(
left: 53,
top: 40,
child: Text(
'CONTAINMENT SYSTEM',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 361,
height: 35,
child: Stack(
children: [
Positioned(
left: 48,
top: 11,
child: SizedBox(
width: 40,
height: 13,
child: Text(
'10:30',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w700,
height: 0,
),
),
),
),
],
),
),
),
],
),
),
),
],
),
),
],
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment