Flutter - UI Clone Coding

Target : https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App

Financial Mobile IOS App

 

main.dart

import 'package:flutter/material.dart';
import 'package:myapp/widgets/rounded_button.dart';
import 'package:myapp/widgets/wallet_card.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int count = 0;

  void onPressAdd() {
    setState(() {
      count++;
    });
  }

  void onPressRedus() {
    setState(() {
      count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: Scaffold(
        backgroundColor: const Color(0xFF181818),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 20,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(
                  height: 80,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: const [
                        Text(
                          'Hey, Selena',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 24,
                            fontWeight: FontWeight.w800,
                          ),
                        ),
                        Text(
                          'Welcome back',
                          style: TextStyle(
                            color: Color.fromRGBO(255, 255, 255, 0.8),
                            fontSize: 16,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
                const SizedBox(
                  height: 35,
                ),
                Text(
                  'Total Balance',
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.80),
                    fontSize: 20,
                  ),
                ),
                const SizedBox(
                  height: 5,
                ),
                const Text(
                  '\$5 194 382',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  '\$$count',
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(
                  height: 25,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    InkWell(
                      onTap: onPressAdd,
                      child: const RoundedButton(
                        text: 'Transfer',
                        bgColor: Colors.amber,
                        textColor: Colors.black,
                      ),
                    ),
                    GestureDetector(
                      onTap: onPressRedus,
                      child: const RoundedButton(
                        text: 'Request',
                        bgColor: Color(0xFF353535),
                        textColor: Colors.white,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 50),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    const Text(
                      'Wallets',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 30,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      'View All',
                      style: TextStyle(
                        color: Colors.white.withOpacity(0.80),
                        fontSize: 15,
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 20,
                ),
                WalletCard(
                  name: 'Euro',
                  value: '6 428',
                  unit: 'EUR',
                  icon: Icons.euro_rounded,
                  isEven: false,
                ),
                WalletCard(
                  name: 'Dollar',
                  value: '55 622',
                  unit: 'USD',
                  icon: Icons.monetization_on_outlined,
                  isEven: true,
                  offsetY: -30,
                ),
                WalletCard(
                  name: 'Rupee',
                  value: '28 981',
                  unit: 'INR',
                  icon: Icons.info_outline_rounded,
                  isEven: false,
                  offsetY: -60,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

rounded_button.dart

import 'package:flutter/material.dart';

class RoundedButton extends StatelessWidget {
  final String text;
  final Color bgColor;
  final Color textColor;

  const RoundedButton({
    super.key,
    required this.text,
    required this.bgColor,
    required this.textColor,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: bgColor,
        borderRadius: BorderRadius.circular(
          45,
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(
          vertical: 20,
          horizontal: 40,
        ),
        child: Text(
          text,
          style: TextStyle(fontSize: 20, color: textColor),
        ),
      ),
    );
  }
}

wallet_card.dart

import 'package:flutter/material.dart';

class WalletCard extends StatelessWidget {
  final String name;
  final String value;
  final String unit;
  final bool isEven;
  final IconData icon;
  final double offsetY;
  late Color bgColor;
  late Color textColor;

  WalletCard(
      {super.key,
      required this.name,
      required this.value,
      required this.unit,
      required this.isEven,
      required this.icon,
      this.offsetY = 0}) {
    bgColor = const Color(0xFF353535);
    textColor = Colors.white;

    if (isEven) {
      bgColor = Colors.white;
      textColor = const Color(0xFF353535);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: Offset(
        0,
        offsetY,
      ),
      child: Container(
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(
          color: bgColor,
          borderRadius: BorderRadius.circular(25),
        ),
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    name,
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: textColor,
                    ),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  Row(
                    children: [
                      Text(
                        value,
                        style: TextStyle(
                          color: textColor,
                        ),
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      Text(
                        unit,
                        style: TextStyle(
                          color: textColor.withOpacity(0.50),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              Transform.scale(
                scale: 2,
                child: Transform.translate(
                  offset: const Offset(-10, 20),
                  child: Icon(
                    icon,
                    size: 95,
                    color: textColor,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

결과 화면