Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AnimatedBuilder',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 5),
);
_controller.addListener(() {
setState(() {});
});
_controller.forward();
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
final List<Map<String, dynamic>> profileMenu = [
{
"title": "Goals",
"color": const Color(0xff4F375A),
"icon": Icons.circle_outlined
},
{
"title": "My Body",
"color": const Color(0xff393C87),
"icon": Icons.person,
},
{
"title": "Settings",
"color": const Color(0xff213D82),
"icon": Icons.settings,
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xff2F2B53),
appBar: AppBar(
elevation: 0.0,
backgroundColor: const Color(0xff2F2B53),
leading: const Padding(
padding: EdgeInsets.all(8.0),
child: Icon(Icons.arrow_back_ios),
),
actions: const [
Padding(
padding: EdgeInsets.all(8.0),
child: Icon(
Icons.more_horiz,
size: 32,
),
)
],
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 28.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const ProfileTop(),
const SizedBox(
height: 12,
),
const Text(
"David",
style: TextStyle(
fontSize: 44,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
const SizedBox(
height: 60,
),
ProfileMenu(profileMenu: profileMenu),
const SizedBox(
height: 20,
),
const SignOutBtn()
],
),
),
);
}
}
class SignOutBtn extends StatelessWidget {
const SignOutBtn({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 22.0),
child: SizedBox(
height: 60,
width: 150,
child: ElevatedButton.icon(
onPressed: () {},
icon: const Icon(
Icons.login_outlined,
color: Colors.redAccent,
),
label: const Text(
"Sign Out",
style: TextStyle(fontSize: 18),
),
style: ElevatedButton.styleFrom(
primary: const Color(0xff3D3A63),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
),
),
);
}
}
class ProfileMenu extends StatelessWidget {
const ProfileMenu({
Key? key,
required this.profileMenu,
}) : super(key: key);
final List<Map<String, dynamic>> profileMenu;
@override
Widget build(BuildContext context) {
return SizedBox(
height: 300,
child: ListView.separated(
itemCount: profileMenu.length,
separatorBuilder: (context, index) => const SizedBox(
height: 40,
),
itemBuilder: (context, index) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
CircleAvatar(
radius: 30,
backgroundColor: profileMenu[index]["color"],
child: Center(
child: Icon(
profileMenu[index]["icon"],
size: 32,
),
),
),
const SizedBox(
width: 20,
),
Text(
profileMenu[index]["title"],
style: const TextStyle(
color: Colors.white,
fontSize: 22,
),
),
],
),
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: const Color(0xff3D3A63),
borderRadius: BorderRadius.circular(20),
),
child: const Center(
child: Icon(
Icons.arrow_forward_ios_rounded,
color: Colors.white,
size: 22,
),
),
)
],
);
},
),
);
}
}
class ProfileTop extends StatelessWidget {
const ProfileTop({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const CircleAvatar(
radius: 70,
backgroundImage: NetworkImage(
"https://images.unsplash.com/photo-1474176857210-7287d38d27c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
),
),
Row(
children: [
Container(
color: Colors.grey,
width: 1,
height: 100,
),
const SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Joined",
style: TextStyle(
color: Colors.blueGrey[100],
fontSize: 18,
),
),
const SizedBox(
height: 10,
),
const Text(
"6 mon ago",
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
],
)
],
)
],
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment