Building a Wallet UI in Flutter
Tags: flutter, ui, wallet, coding
Published: 2023-10-07 16:31:12

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](https://github.com/ronphobos) account: https://github.com/ronphobos

## Setting Up

You can install the [Flutter ](https://flutter.dev/?gclid=CjwKCAjwg4SpBhAKEiwAdyLwvCiNQEBWDRfewPvy4GNm7W3AIJgVzyz1YwHWJ7Z6cKY7nwLisMV0ARoCUGQQAvD_BwE&gclsrc=aw.ds)SDK by clicking this link [Download and install Flutter ](https://docs.flutter.dev/get-started/install)

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
```