플러터 화면구성

플러터로 UI 만들기

• 색상 사용법
  • Color(0xFF 색상코드)
  • Color.fromARGB(255, r, g, b)
  • Color.fromRGBO(r,g,b,opacity)
• SingleChildScrollView로 감싸기 : 영역 바깥으로 넘치지 않도록 함
• Transform.translate를 통해 offset 주거나 사이즈 조정하기
• Container에 clipBehavior를 넣어 Clip.hardEdge 설정으로 overflow된 요소들 자르기
• Container에 decoration값을 넣어 rounded한 박스 만들기

//main.dart
import 'package:flutter/material.dart';
import 'package:toonflix/widgests/button.dart';
import 'package:toonflix/widgests/card.dart';

class Player {
  String? name = 'nico';
  Player();
}

void main() {
  var nico = Player();
  nico.name;
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    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: 70,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          const Text(
                            'Hey, Selena',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 28,
                                fontWeight: FontWeight.bold),
                          ),
                          Text(
                            'Welcome back',
                            style: TextStyle(
                                color: Colors.white.withOpacity(0.8),
                                fontSize: 18),
                          )
                        ],
                      )
                    ],
                  ),
                  const SizedBox(height: 80),
                  Text('Total Balance',
                      style: TextStyle(
                          fontSize: 22, color: Colors.white.withOpacity(0.8))),
                  const SizedBox(
                    height: 5,
                  ),
                  const Text('\$194 482',
                      style: TextStyle(
                          fontSize: 44,
                          color: Colors.white,
                          fontWeight: FontWeight.w600)),
                  const SizedBox(
                    height: 30,
                  ),
                  const Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Button(
                            text: 'Transfer',
                            bgColor: Color(0xFFF1B33B),
                            textColor: Colors.black),
                        Button(
                            text: 'Request',
                            bgColor: Color(0xFF1F2123),
                            textColor: Colors.white),
                      ]),
                  const SizedBox(height: 100),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      const Text(
                        'Wallets',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 26,
                            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_rounded,
                    isInverted: false,
                    order: 0,
                  ),
                  const CurrencyCard(
                      name: 'Bitcoin',
                      code: 'BTC',
                      amount: '9 785',
                      icon: Icons.currency_bitcoin,
                      isInverted: true,
                      order: 1),
                  const CurrencyCard(
                      name: 'Dollar',
                      code: 'USD',
                      amount: '428',
                      icon: Icons.attach_money,
                      isInverted: false,
                      order: 2),
                ],
              ),
            ),
          )),
    );
  }
}

//button.dart
import 'package:flutter/material.dart';

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

  const Button(
      {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),
          )),
    );
  }
}

//card.dart
import 'package:flutter/material.dart';

class CurrencyCard extends StatelessWidget {
  final String name, code, amount;
  final IconData icon;
  final bool isInverted;
  final double order;
  final _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, order * -20),
      child: Container(
          clipBehavior: Clip.hardEdge,
          decoration: BoxDecoration(
              color: isInverted ? Colors.white : const Color(0xFF1F2123),
              borderRadius: BorderRadius.circular(20)),
          child: Padding(
            padding: const EdgeInsets.all(30),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                  Text(
                    name,
                    style: TextStyle(
                        color: isInverted ? _blackColor : Colors.white,
                        fontSize: 24),
                  ),
                  const SizedBox(height: 10),
                  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),
                              fontSize: 18))
                    ],
                  )
                ]),
                Transform.scale(
                    // 크기 바꿈
                    scale: 2.2,
                    child: Transform.translate(
                      // 좌표 바꿈(x, y)
                      offset: const Offset(-5, 12),
                      child: Icon(icon,
                          color: isInverted ? _blackColor : Colors.white,
                          size: 88),
                    ))
              ],
            ),
          )),
    );
  }
}