Flutter, developed by Google, is a popular open-source UI software development toolkit that allows developers to create natively compiled applications for mobile, web, and desktop from a single codebase. Its hot-reload feature, expressive UI components, and rich ecosystem make it an excellent choice for creating stunning interfaces.
N.B: the complete source code is available on my github account: https://github.com/ronphobos
Setting Up
You can install the Flutter SDK by clicking this link Download and install Flutter
Create a New Flutter Project by typing in your terminal:
flutter create wallet_ui
Open the Project:
Use your favorite code editor to open the wallet_ui directory.
First of all create the config folders 📁 which will contain the configuration data, colors of our application and widgets 📁 which will contain the widgets of our application.
Then at the root of the project, create the assets folder for the images and the fonts folder for the typo.
Clear the contents of main.dart file in lib folder and paste the following code
import 'package:flutter/material.dart';
import 'package:test1/config/data.dart';
import 'package:test1/widgets/CardSection.dart';
import 'package:test1/widgets/PieChart.dart';
import 'package:test1/widgets/header.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
theme: ThemeData(fontFamily: 'Circular'),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.primaryWhite,
body: Column(
children: [
SizedBox(
height: 8,
),
Container(
height: 120,
child: WalletHeader(),
),
Expanded(
child: CardSection(),
),
Expanded(
child: PieChart(),
)
],
),
);
}
}
in the config folder, let create a data.dart file and paste the following code
import 'package:flutter/material.dart';
class AppColors {
static Color primaryWhite = Color(0xFFCADCED);
static Color orange = Colors.deepOrange;
static List pieColors = [
Colors.indigo[400],
Colors.blue,
Colors.green,
Colors.amber,
Colors.deepOrange,
Colors.brown,
];
static List<BoxShadow> neumorpShadow = [
BoxShadow(
color: Colors.white.withOpacity(0.5),
spreadRadius: -5,
offset: Offset(-5, -5),
blurRadius: 30),
BoxShadow(
color: Colors.blue[900]!.withOpacity(.2),
spreadRadius: 2,
offset: Offset(7, 7),
blurRadius: 20)
];
}
List category = [
{"name": "Paiement effectué Djamo", "amount": 500.0},
{"name": "Netflix", "amount": 100.0},
{"name": "Google Play fees", "amount": 80.0},
{"name": "Facture électricité", "amount": 50.0},
{"name": "Aliexpress fees", "amount": 100.0},
{"name": "CV en ligne", "amount": 30.0},
];
in the widget folder create a header.dart file and paste this
import 'package:flutter/material.dart';
import 'package:test1/config/data.dart';
class WalletHeader extends StatelessWidget {
const WalletHeader({super.key});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Mon portefeuille",
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.primaryWhite,
boxShadow: AppColors.neumorpShadow,
),
child: Stack(
children: [
Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.orange,
boxShadow: AppColors.neumorpShadow,
),
),
),
Center(
child: Container(
margin: const EdgeInsets.all(4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.primaryWhite,
boxShadow: AppColors.neumorpShadow,
),
),
),
const Center(
child: Icon(Icons.notifications),
),
],
),
),
],
),
);
}
}
for the card section, create a cardSection.dart file and paste this
import 'package:flutter/material.dart';
import 'package:test1/config/data.dart';
import 'package:test1/widgets/cardDetail.dart';
class CardSection extends StatelessWidget {
const CardSection({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
'Carte selectionnée',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 2,
itemBuilder: (context, i) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 40),
decoration: BoxDecoration(
color: AppColors.primaryWhite,
boxShadow: AppColors.neumorpShadow,
borderRadius: BorderRadius.circular(20),
),
child: Stack(
children: [
Positioned.fill(
left: -300,
top: -100,
bottom: -100,
child: Container(
decoration: BoxDecoration(
boxShadow: AppColors.neumorpShadow,
shape: BoxShape.circle,
color: Colors.white30),
),
),
CardDetail()
],
),
);
},
),
)
],
);
}
}
create a cardDetail.dart file for designing the details of the card
import 'package:flutter/material.dart';
import 'package:test1/config/data.dart';
class CardDetail extends StatelessWidget {
const CardDetail({super.key});
@override
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: Container(
width: 250, child: Image.asset('assets/mastercardlogo.png')),
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
width: 70,
height: 50,
decoration: BoxDecoration(
color: AppColors.primaryWhite,
boxShadow: AppColors.neumorpShadow,
borderRadius: BorderRadius.circular(15)),
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Container(
child: Padding(
padding: const EdgeInsets.only(bottom: 20, left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
"**** **** **** ",
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold),
),
Text(
"5850",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.bold),
),
],
),
Text(
"Carte Platine",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
)
],
),
),
),
)
],
);
}
}
and the for the last section, you will need to create the PieChart.dart file
import 'package:flutter/material.dart';
import 'package:test1/config/data.dart';
class PieChart extends StatelessWidget {
const PieChart({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
"Dépenses",
style: TextStyle(fontWeight: FontWeight.bold),
),
Row(
children: [
Expanded(
flex: 5,
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: category
.map(
(value) => Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
children: [
CircleAvatar(
radius: 5,
backgroundColor: AppColors
.pieColors[category.indexOf(value)],
),
SizedBox(
width: 5,
),
Row(
children: [
Text(
value['name'],
style: TextStyle(fontSize: 18),
),
Text(
':',
style: TextStyle(fontSize: 18),
),
SizedBox(
width: 10,
),
Text(
value['amount'].toString() + 'F',
style: TextStyle(fontSize: 18),
),
],
)
],
),
),
)
.toList(),
),
),
),
],
),
],
);
}
}
Finally, all you have to do is make the fonts and assets folder accessible in this pubspec.yaml file.
in the assets section:
# To add assets to your application, add an assets section, like this:
assets:
- assets/
# - images/a_dot_ham.jpeg
fonts:
- family: Circular
fonts:
- asset: fonts/CircularStd-Medium.ttf
- asset: fonts/CircularAir-Light.ttf
weight: 100
- asset: fonts/CircularStd-Bold.ttf
weight: 500
Top comments (0)