[Flutter] 커스텀 위젯 만들기(코드가 길어지는 경우에 유용)

전

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: SizedBox(
          child: Text('ㅎ2'), //SizeBox가 길어질 가능성이 있음.
        ),
      ),
    );
  }
}

 

 

후

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(),
          body: MyWidget(); // 3. 작명한대로 걍 같다쓰기만 하면 된다.
      ),
    );
  }
}

class MyWidget extends StatelessWidget { // 1. 클래스만들어서 작명
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox( // 2. 리턴부분에 위에있던 코드 그대로 복붙 하면 됨
        child: Text('ㅎ2')
    );
  }
}

var a = SizedBox(child: Text('ㅎ2')); // 변수로 사용해도 된다.

 

1. 클래스 만들어서 작명하기

2. 긴코드 return 부분에 쓸 코드 복붙해서 넣기

3. 클래스명 불러오기

 

끗ㅋ

 

 

++

아무거나 커스텀위젯화 하지는 말자!

재사용이 많은 UI 활용을 위해,

큰 코드페이지의 사용을 위해

유용하게 사용하자.

 

변수로 담아서 사용해도 상관은 없지만, 

안의 데이터가 바뀔일이 없는 UI로 사용해야 됨.