builder 함수

하요·2024년 7월 3일
0
post-thumbnail
post-custom-banner

Flutter에서 특정 위치에서 새로운 BuildContext 생성하기: builder 함수

Flutter에서 builder 함수는 새로운 BuildContext를 생성하여 특정 위치에서 위젯을 빌드할 수 있도록 하는 콜백 함수입니다. 이를 통해 위젯 트리의 다른 부분과 분리된 BuildContext를 사용하여 위젯을 빌드할 수 있습니다.

주요 속성

  • builder: 위젯을 빌드하는 함수로, 새로운 BuildContext를 매개변수로 받습니다. 이 함수는 BuildContext와 함께 위젯을 반환해야 합니다.

주요 활용도

  • 새로운 BuildContext 생성: 기존의 BuildContext에서 벗어나 새로운 BuildContext를 생성하여 특정 작업을 수행할 수 있습니다.
  • 상위 위젯의 컨텍스트 문제 해결: 상위 위젯의 컨텍스트가 필요한 경우, builder를 사용하여 새로운 컨텍스트를 생성하고, 이를 통해 상위 위젯에 접근할 수 있습니다.
  • 위젯 트리의 분리: 특정 위젯을 트리의 다른 부분과 분리하여 빌드할 수 있습니다.

코드 예제

아래 예제는 showModalBottomSheet를 사용하여 모달 다이얼로그를 표시하고, builder를 통해 모달의 내용을 정의하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: 200,
                  color: Colors.white,
                  child: Center(
                    child: Text('This is a modal'),
                  ),
                );
              },
            );
          },
          child: Text('Show Modal'),
        ),
      ),
    );
  }
}

이 외에도 다양한 곳에서 builder 함수가 사용됩니다. 예를 들어, ListView.builder, FutureBuilder, StreamBuilder 등에서 builder 함수가 사용됩니다. 이 함수들은 모두 새로운 BuildContext를 생성하여 특정 위치에서 위젯을 빌드하는 역할을 합니다.

추가 팁

  • 컨텍스트 이해: builder 함수를 사용하여 새로운 BuildContext를 생성함으로써 위젯 트리 내에서의 위치를 보다 명확히 하고, 상위 위젯과의 상호작용을 관리합니다.
  • 반응형 디자인: builder 함수를 사용하여 특정 위치에서 새로운 BuildContext를 생성하고, 반응형 디자인을 구현할 수 있습니다.

관련 자료

profile
flutter 개발자(진)
post-custom-banner

0개의 댓글