[Package] WidgetBook 설치 및 테스트

WidgetBook?

• Flutter에서 사용하는 StoryBook중 하나이다.
• 컴포넌트를 한 곳에 모아 관리할 수 있는 중앙 위젯 라이브러리 제공.
• 컴포넌트 개발 및 테스트에 사용
  • 컴포넌트를 독립적으로 개발, 테스트할 수 있도록 도움
• 컴포넌트 라이브러리 구축
  • 컴포넌트 라이브러리를 구축하고 문서화(예시와 설명)
• 시각적 회의 및 협업
  • 디자이너, 개발자, 제품 관리자 등 팀원들이 시각적으로 컴포넌트를 검토하고 의견을 공유
• Widgetbook Cloud를 사용하면 Figma와 동기화하여 공유 가능.

WidgetBook 사용 방법

설치에 “Generator Approach”와 “Manual Approach”가 있는데 Generator Approach로 하겠습니다.

 

Install

• 터미널에서 flutter pub add widgetbook_annotation widgetbook 입력 실행
• 그리고 pubspec.yaml 파일에 아래와 같이 추가

dependencies:
  widgetbook_annotation: ^3.1.0
  widgetbook: ^3.7.0

dev_dependencies:
  widgetbook_generator: ^3.7.0
  build_runner:

 

setup

• build_runner 추가 (build_runner 설치 안했을 경우)
  • 터미널에 dart pub add dev:build_runner 입력 실행
• 그리고 Widgetbook을 실행할 페이지에 아래 코드 추가(저는 main.dart 사용)

import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

@widgetbook.App()

• 터미널에 flutter pub run build_runner build 입력 실행
• main.directories.g.dart 생성된걸 볼 수 있음
• import 추가 및 Widgetbook.material 코드 추가

// widgetbook.dart

import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

// Import the generated directories variable
import 'main.directories.g.dart'; // add

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

@widgetbook.App()
class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook.material(
      // Use the generated directories variable
      directories: directories,
      addons: [],
      integrations: [
        // To make addons & knobs work with Widgetbook Cloud
        WidgetbookCloudIntegration(),
      ],
    );
  }
}

• 실행 화면

• 웹으로 실행해서 보고 싶으면 flutter run -d chrome -t lib/main.dart

컴포넌트 추가

• custom_card.dart 추가

import 'package:flutter/material.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

class CustomCard extends StatelessWidget {
  final Widget child;
  final Color backgroundColor;
  final double borderRadius;

  const CustomCard({
    required this.child,
    this.backgroundColor = Colors.white,
    this.borderRadius = 8.0,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(borderRadius),
      ),
      child: child,
    );
  }
}

@widgetbook.UseCase(
  name: 'Default Style',
  type: CustomCard,
)
CustomCard defaultCustomCard(BuildContext context) {
  return const CustomCard(
    child: Text('This is a custom card'),
  );
}

@widgetbook.UseCase(
  name: 'With Custom Background Color',
  type: CustomCard,
)
CustomCard customBackgroundCustomCard(BuildContext context) {
  return CustomCard(
    backgroundColor: Colors.green.shade100,
    child: const Text('This is a custom card with a custom background color'),
  );
}

• flutter pub run build_runner build 실행
• main.directories.g.dart 수정된것 확인 가능
• 실행 화면

• @UseCase Type 이름에 따라서 네비게이션 생긴다
• Knobs 수정하면 컴포넌트의 property 수정 할수있다.

 

자세한 사용법은 https://pub.dev/packages/widgetbook 확인 해주세요.