[노마드코더: Flutter 로 웹툰 앱 만들기] #3.5 Reusable Widgets

Error Lense라는 익스텐션을 설치해서, 오류가 났을 때 그 원인을 쉽게 알아보도록 하자 

---

플러터는 이런 식으로 UI가 overflow 하는 경우과 같은 때, 경고하듯이 이렇게 보여준다.

변하지 않을 값에 const를 주지만, 
button 클래스를 만들어 버리면 배경색상, text들이 const의 속성을 갖지 않게 되기 때문에, const를 제거해주어야 한다. 

 

lib 폴더에

button.dart 파일을 만들어서 
Button 클래스를 작성했다. 

그 전에 수강했던 강의에서는 밖으로 빼는 것만 했는데 이렇게 비슷한 버튼들을 쉽게 재사용 가능하게 만드는 법은 오늘 알게 되었다. 아주 유용한 것! 

클래스 덕분에 한 결 간결해진 코드를 볼 수 있다.

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

class Player {
  String? name;
  Player();
}

void main() {
  var nico = Player();

  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      backgroundColor: const Color(0xFF181818),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 40),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          //헷갈리는 부분, Total Balance 왼쪽 정렬
          children: [
            const SizedBox(
              height: 80,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    const Text('Hey, Selena',
                        style: TextStyle(
                          fontSize: 30,
                          color: Colors.white,
                          fontWeight: FontWeight.w800,
                        )),
                    Text(
                      'Welcome back',
                      style: TextStyle(
                        color: Colors.white.withOpacity(0.6),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            const SizedBox(
              height: 120,
            ),
            Text('Total Balance',
                style: TextStyle(
                  fontSize: 22, //pixel
                  color: Colors.white.withOpacity(0.8),
                )),
            const SizedBox(
              height: 5,
            ),
            const Text('\$5 194 482',
                style: TextStyle(
                  fontSize: 48, //pixel
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                )),
            const SizedBox(
              height: 30,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                // MyButton(),
                Button(
                  text: 'Transfer',
                  bgColor: Color(0xFFF1B33B),
                  textColor: Colors.black,
                ),
                Button(
                  text: 'Request',
                  bgColor: Color(0xFF1F2123),
                  textColor: Colors.white,
                ),
              ],
            )
          ],
        ),
      ),
    ));
  }
}

class MyButton extends StatelessWidget {
  const MyButton({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFF2B33A),
        borderRadius: BorderRadius.circular(45),
      ),
      child: const Padding(
        padding: EdgeInsets.symmetric(
          horizontal: 50,
          vertical: 20,
        ),
        child: Text('Transfer',
            style: TextStyle(
              fontSize: 22,
            )),
      ), // color: Color(0xFFF2B33A),
    );
  }
}

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) {
    // TODO: implement build
    return Container(
      decoration: BoxDecoration(
        color: bgColor,
        borderRadius: BorderRadius.circular(45),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(
          vertical: 20,
          horizontal: 50,
        ),
        child: Text(text,
            style: TextStyle(
              fontSize: 22,
              color: textColor,
            )),
      ),
    );
  }
}

const ahead of time

 

다음에는 아래와 같은 부분을 만들어 본다.