[Flutter] Custom Widget 사용하기

 

커스텀 위젯 클래스 생성

- 커스텀 위젯은 클래스로 만든다.

커스텀위젯 클래스 생성

1. 코드 빈 공간에 stless 입력 후 StatelessWidget을 상속받는 위젯 클래스를 하나 생성한다.

 

2. 클래스 생성 후 클래스 명을 자신이 원하는 이름으로 변경한다.

 

3. 하단의 return 우측에 자신이 담고자 할 레이아웃에 대한 코드를 입력한다.

 

4. 결과적으로 return에 해당하는 코드를 클래스 명을 통해 호출할 수 있도록 한다.

 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(),
      body: BoxItems(), // 커스텀 위젯 클래스 호출
    ));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      // 커스텀 위젯의 내용
      child: Text(
        "나는 SizedBox",
        style: TextStyle(
          fontSize: 35,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

 

 

커스텀 위젯 변수로 생성

- 클래스와 마찬가지로 변수로 선언 후 그대로 호출하여 사용할 수 있으나 성능 이슈에 대한 가능성 때문에 이 방법은 변하지 않는 UI(상단바, 하단바, 로고 등)에 사용하며 기타 데이터가유동적으로 변하는 UI의 경우 클래스를 사용하여 위젯을 만든다.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(),
      body: boxItems, // 커스텀 위젯 변수 호출
    ));
  }
}

var boxItems = SizedBox(
      // 커스텀 위젯의 내용
      child: Text(
        "나는 SizedBox",
        style: TextStyle(
          fontSize: 35,
          fontWeight: FontWeight.bold,
        ),
      ),
    );

 

 

따라서 커스텀 위젯은 재사용이 많은 큰 위젯을 위주로만 사용하는 것이 효율적이다.