Skip to content

Instantly share code, notes, and snippets.

View AlenaNicolay's full-sized avatar

Widgetbook AlenaNicolay

View GitHub Profile
flutter run -d chrome -t lib/widgetbook.dart
// single app
flutter_app
└─── lib
| └─── feature.dart
│ └─── main.dart
│ └─── widgetbook.dart
│ └─── widgetbook.directories.g.dart
└─── pubspec.yaml
@AlenaNicolay
AlenaNicolay / Widgetbook.directories
Created August 8, 2023 12:33
widgetbook.directories.g.dart
// 'widgetbook.directories.g.dart'
// coverage:ignore-file
// ignore_for_file: type=lint
// ignore_for_file: unused_import, prefer_relative_imports, directives_ordering
// GENERATED CODE - DO NOT MODIFY BY HAND
// **************************************************************************
// AppGenerator
@AlenaNicolay
AlenaNicolay / Code generator
Created August 8, 2023 12:27
Initiate code generator
flutter pub run build_runner build — delete-conflicting-outputs
@AlenaNicolay
AlenaNicolay / CustomButton
Created August 8, 2023 12:26
Annotate your Widgets
// lib/components/custom_button.dart
import 'package:flutter/material.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
class CustomButton extends StatelessWidget {
const CustomButton({
super.key,
required this.title,
this.onPressed,
});
@AlenaNicolay
AlenaNicolay / Basic setup
Created August 8, 2023 12:18
App structure
flutter_app
└─── lib
| └─── feature.dart
│ └─── main.dart
│ └─── widgetbook.dart
└─── pubspec.yaml
@AlenaNicolay
AlenaNicolay / Widgetbook.dart
Created August 8, 2023 12:17
Setting Up the Entry Point
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
import 'widgetbook.directories.g.dart';
void main() => runApp(const WidgetbookApp());
@widgetbook.App()
class WidgetbookApp extends StatelessWidget {
const WidgetbookApp({super.key});
@AlenaNicolay
AlenaNicolay / Required packages
Created August 8, 2023 12:15
Set up Widgetbook
dependencies:
widgetbook_annotation: ^3.0.0
dev_dependencies:
widgetbook: ^3.0.0
widgetbook_generator: ^3.0.0
build_runner:
@AlenaNicolay
AlenaNicolay / CustomButton Widget
Created July 14, 2023 12:58
Widgetbook use case with knobs
@widgetbook.UseCase(
name: 'Customizable',
type: CustomButton,
)
CustomButton customizableButton(BuildContext context) {
return CustomButton(
title: context.knobs.string(label: 'Title', initialValue: 'Click Me'),
onPressed: context.knobs.boolean(label: 'Enabled', initialValue: true)
? () {}
: null,
@AlenaNicolay
AlenaNicolay / CustomButton widget
Created July 14, 2023 12:57
CustomButton widget
class CustomButton extends StatelessWidget {
const CustomButton({
Key? key,
required this.title,
this.onPressed,
}) : super(key: key);
final String title;
final VoidCallback? onPressed;
@override
Widget build(BuildContext context) {