[Flutter] #3.5 Reusable Widgets

1. editor format on Save

코드를 저장했을 때,

콤마가 필요한 곳에 콤마를 찍고, 보기 쉽게 정렬해주는 기능.

다트 언어 뿐만 아니라, 다른 언어에서도 사용할 수 있음

 

파일이름 : settings.json

"dart" : {
	"editor.formatOnSave" : true,
}

 

 

2. Error Lens extension

에러 내용을 코드편집기에서 미리보기로 띄워줌

 

3. Request Button

copy Transfer Button. -> make it as a Reusable Widget

 

3. Ui problem

overflowed by the pixel error. -> modify padding ( to 20px )

 

4. color change

Request Button -> Color(0xFF1F2123)

 

5. setting two buttons as far as possible

두 버튼의 부모 Row 속성을 다룬다.

mainAxisAlignment: MainAxisAlignment.spaceBetween,

 

6. 두 버튼은 글자 색, 버튼 색 빼고 전부 동일하므로, 하나의 reusable widget으로 만들어보자.

code action -> extract widget ->위젯 이름 설정(MyButton) ->  코드 하단에 새로운 MyButton이라는 클래스에 대한 코드가 자동으로 작성됨.

6번 내용은 Dart 심화 과정에서 실제로 사용할 예정! 지금은 위 기능을 사용하지않고, 새 폴더를 만들어서 직접 커스텀 위젯을 만들 예정.

 

7. 커스텀 위젯 '직접' 만들기

lib 폴더 -> widgets 폴더 -> button.dart 생성

shortcut

st .. -> flutter stateless widget Click 하면 생성자를 포함한 위젯 코드 틀이 전부 뜨므로, 수정 및 추가만 하면됨.

 

class Button extends from Stateless Widgets{
    final String text;
    final Color bgColor;
    final Color textColor;

//code action ->create constructor for final fields

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

    @override
    Widget build(BuildContext context) {
    return Container( //main.dart에 있는 코드 );
    }
}

 

code action을 사용해 각 final 속성들에 대한 생성자를 한번에 만들 수 있다.

이때, 생성자 안에 super.keys, 가 추가되는데 keys에 대해서는 나중에 알아보겠다.

지금은 해당 줄을 지워도된다.

 

텍스트, 버튼색, 텍스트색에 대한 final 속성을 따로 만들었으니,

return Container() 안에 있는 각 값들도 변수 이름으로 바꿔준다.

 

8. Padding 오류

text를 확정된 String 상수로 주지 않고,

변수로 대체하였더니 왜 상수를 안 주냐고 불평한다. 

그럴땐 Padding 앞에 있던 const를 지워준다.

 

9. main.dart 에서 'Transfer 생성'

 

main.dart에서 Button을 만든다.

여기서는 모든 변수를 특정 값으로 전달하므로, Button은 const가 된다.

Button의 build에서는 const가 아닌 것들이 있지만, main.dart에서 최종 만들어진 Button은 const라는 점! 

(모든 필요한 값들을 변수가 아닌 상수로 전달 완료했으므로.)

 

마찬가지로 밑에 Request버튼도 만들기!

 

 

핵심:

버튼은 위젯이고, 위젯도 결국 클래스다

재사용 가능한 위젯을 만든다는 것은

클래스를 직접 생성하여 final 변수는 무엇으로 둘 지 지정하는 것. 

 

다음: 카드만들기. (아이콘, transformation 등)

 

 

 

 

출처 :https://nomadcoders.co/flutter-for-beginners/lectures/4144

All Courses – 노마드 코더 Nomad Coders