LogoWidgetbook

Complete Example

Let's add two more components, CustomCard and CustomTextField, with different use cases for manual and generator approaches.

Folder structure#

lib/
├── components/
│ ├── container.dart
│ ├── custom_card.dart
│ └── custom_text_field.dart
├── widgetbook_generator.dart (for generator approach)
├── widgetbook_generator.g.dart (will be generated eventually)
└── widgetbook.dart (for manual approach)

Component#

Let's create both components

CustomCard Component#

Create a file named custom_card.dart in the lib/components directory and add the following code:

// lib/components/custom_card.dart
import 'package:flutter/material.dart';

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,
    );
  }
}

CustomTextField Component#

Create a file named custom_text_field.dart in the lib/components directory and add the following code:

// lib/components/custom_text_field.dart
import 'package:flutter/material.dart';

class CustomTextField extends StatelessWidget {
  final TextEditingController controller;
  final String hintText;

  const CustomTextField({
    required this.controller,
    this.hintText = '',
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      decoration: InputDecoration(
        hintText: hintText,
        border: const OutlineInputBorder(),
      ),
    );
  }
}

Add components#

Update the lib/widgetbook.dart file to add the new components and their use-cases: