Skip to content

Instantly share code, notes, and snippets.

@spearkkk
Created April 11, 2023 13:32
Show Gist options
  • Save spearkkk/e385af64b428db256ec91124285dfaca to your computer and use it in GitHub Desktop.
Save spearkkk/e385af64b428db256ec91124285dfaca to your computer and use it in GitHub Desktop.
ui-clone
import 'package:flutter/material.dart';
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Run & Gun',
theme: ThemeData(
colorScheme: const ColorScheme(
brightness: Brightness.light,
primary: Color(0xff494A4F),
onPrimary: Color(0xff494A4F),
secondary: Color(0xff252B51),
onSecondary: Color(0xff252B51),
error: Color(0xffe7626c),
onError: Color(0xffe7626c),
background: Color(0xfffffffe),
onBackground: Color(0xfffffffe),
surface: Color(0xffF3EDDD),
onSurface: Color(0xffF3EDDD),
)),
home: Scaffold(
backgroundColor: const Color(0xff494A4F),
appBar: AppBar(
elevation: 0.4,
backgroundColor: const Color(0xff494A4F),
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
clipBehavior: Clip.hardEdge,
decoration: const BoxDecoration(
shape: BoxShape.circle,
),
width: 50,
child: Image.network(
"https://images.unsplash.com/photo-1497316730643-415fac54a2af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2400&q=80")),
const Icon(
Icons.add,
color: Color(0xffF3EDDD),
)
],
),
),
body: Container(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 2.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding:
EdgeInsets.symmetric(vertical: 0.0, horizontal: 10.0),
child: Text(
"MONDAY 16",
style: TextStyle(
color: Color(0xffF3EDDD),
fontWeight: FontWeight.w500,
),
),
),
const Padding(
padding:
EdgeInsets.symmetric(vertical: 0.0, horizontal: 10.0),
child: Text(
"TODAY - 17 19 19 20 ",
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w700,
color: Color(0xffF3EDDD),
),
),
),
const SizedBox(
height: 20,
),
Container(
decoration: BoxDecoration(
color: const Color(0xff252B51),
borderRadius: BorderRadius.circular(40.0)),
height: 200,
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Row(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Column(
children: const [
Text(
"11",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
),
Text(
"30",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
Text(
"|",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
Text(
"12",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
),
Text(
"30",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
],
),
const SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: const [
Text(
"DESIGN",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
),
Text(
"MEETING",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
)
],
),
Row(children: const [
Text(
"ALEX",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
SizedBox(
width: 20,
),
Text(
"HELENA",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
SizedBox(
width: 20,
),
Text(
"NANA",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
]),
],
),
],
),
],
)
],
),
),
),
const SizedBox(
height: 10,
),
Container(
decoration: BoxDecoration(
color: const Color(0xffe7626c),
borderRadius: BorderRadius.circular(40.0)),
height: 200,
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Row(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Column(
children: const [
Text(
"12",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
),
Text(
"35",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
Text(
"|",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
Text(
"14",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
),
Text(
"10",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
],
),
const SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: const [
Text(
"DAILY",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
),
Text(
"PROJECT",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
)
],
),
Row(children: const [
Text(
"ME",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
SizedBox(
width: 20,
),
Text(
"RICHARD",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
SizedBox(
width: 20,
),
Text(
"CIRY",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
]),
],
),
],
),
],
)
],
),
),
),
const SizedBox(
height: 10,
),
Container(
decoration: BoxDecoration(
color: const Color(0xff252B51),
borderRadius: BorderRadius.circular(40.0)),
height: 200,
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Row(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Column(
children: const [
Text(
"15",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
),
Text(
"00",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
Text(
"|",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
Text(
"16",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
),
Text(
"30",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
],
),
const SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: const [
Text(
"WEEKLY",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
),
Text(
"PLANNING",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w600,
color: Color(0xffF3EDDD),
),
)
],
),
Row(children: const [
Text(
"DEN",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
SizedBox(
width: 20,
),
Text(
"NANA",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
SizedBox(
width: 20,
),
Text(
"MARK",
style: TextStyle(
color: Color(0xffF3EDDD),
),
),
]),
],
),
],
),
],
)
],
),
),
)
],
),
),
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment