Stateless Widget UI

[jnjosjk0965]

main.dart

import 'package:flutter/material.dart'; import 'package:toonflix/widgets/button.dart'; import 'package:toonflix/widgets/currency_cart.dart';

void main() { runApp(const App()); // import 된 함수 }

class App extends StatelessWidget { const App({super.key}); // root @override Widget build(BuildContext context) { /*1. material -> 구글의 디자인 시스템

2. cupertino -> 애플의 디자인 시스템 아무래도 구글 개발이라 Material이 추천 */ return MaterialApp( 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: 50, ), const Row( mainAxisAlignment: MainAxisAlignment.end, children: [ Column( crossAxisAlignment: CrossAxisAlignment.end, children: [ Text( "Hey, Selena", style: TextStyle( fontSize: 28, fontWeight: FontWeight.w700, color: Colors.white, ), ), Text( "Welcome back", style: TextStyle( color: Color.fromRGBO(255, 255, 255, 0.8), fontSize: 18, ), ), ], ), ], ), const SizedBox( height: 40, ), const Text( 'Total Balance', style: TextStyle( color: Color.fromRGBO(255, 255, 255, 0.8), fontSize: 22, ), ), const SizedBox( height: 5, ), const Text( '\$5 194 482', style: TextStyle( color: Color.fromRGBO(255, 255, 255, 1), fontSize: 48, fontWeight: FontWeight.w800), ), const SizedBox( height: 20, ), const Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Button( text: "Transfer", backgroundColor: Color(0xFFF2B33A), textColor: Colors.black, ), Button( text: "Request", backgroundColor: Color(0xFF1F2123), textColor: Colors.white, ), ], ), const SizedBox( height: 50, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.end, children: [ const Text( "Wallets", style: TextStyle( color: Colors.white, fontSize: 36, fontWeight: FontWeight.w600, ), ), Text( "View All", style: TextStyle( color: Colors.white.withOpacity(0.8), fontSize: 18, ), ), ], ), const SizedBox( height: 20, ), const CurrencyCard( name: "Euro", code: "EUR", amount: "6 428", icon: Icons.euro_sharp, isInverted: false, order: 1, ), const CurrencyCard( name: "Dollar", code: "USD", amount: "55 622", icon: Icons.attach_money_outlined, isInverted: true, order: 2, ), const CurrencyCard( name: "Bitcoin", code: "BTC", amount: "9 785", icon: Icons.currency_bitcoin, isInverted: false, order: 3, ), ], ), ), ), ), ); } }

[jnjosjk0965]

widgets/button.dart

import 'package:flutter/material.dart';

class Button extends StatelessWidget { final String text; final Color backgroundColor; final Color textColor;

const Button({ super.key, required this.text, required this.backgroundColor, required this.textColor, });

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

[jnjosjk0965]

widgets/currency_card.dart

import 'package:flutter/material.dart';

class CurrencyCard extends StatelessWidget { final String name, code, amount; final IconData icon; final bool isInverted; final int order;

final Color _blackColor = const Color(0xFF1F2123);

const CurrencyCard({ super.key, required this.name, required this.code, required this.amount, required this.icon, required this.isInverted, required this.order, });

@override Widget build(BuildContext context) { return Transform.translate( offset: Offset(0, -20 * (order - 1)), child: Container( clipBehavior: Clip.hardEdge, decoration: BoxDecoration( color: isInverted ? Colors.white : _blackColor, borderRadius: BorderRadius.circular(25), ), child: Padding( padding: const EdgeInsets.symmetric( vertical: 25, horizontal: 30, ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( name, style: TextStyle( color: isInverted ? _blackColor : Colors.white, fontSize: 32, fontWeight: FontWeight.w600, ), ), const SizedBox( height: 15, ), Row( children: [ Text( amount, style: TextStyle( color: isInverted ? _blackColor : Colors.white, fontSize: 18, ), ), const SizedBox( width: 5, ), Text( code, style: TextStyle( color: isInverted ? _blackColor.withOpacity(0.8) : Colors.white.withOpacity(0.8), ), ) ], ), ], ), Transform.scale( scale: 2.2, child: Transform.translate( offset: const Offset(5, 12), child: Icon( icon, color: isInverted ? _blackColor : Colors.white, size: 88, ), ), ), ], ), ), ), ); } }