Skip to content

sonnts996/flutter_sheet

Repository files navigation

Getting started

Add dependency to your pubspec.yaml:

flutter_sheet: 'any'

Usage

  • Import packages:
import 'package:flutter_sheet/flutter_sheet.dart';

SheetManager using collections

Initialization

import 'package:flutter/foundation.dart';
import 'package:flutter_sheet/flutter_sheet.dart';
import '../../stylesheet/app_style.dart';
import '../../text/app_text.dart';

void init(){
  Sheet.setup(hotReload: kDebugMode);
  Sheet.registerLazyCollection<AppStyle>({
    'default': () => AppStyle(),
    'dart': () => AppDartStyle(),
  });
  Sheet.registerLazyCollection<AppText>({
    'default': () => const AppText(),
    'vi': () => const AppText(),
  });
}

Using

  • Read AppStyle with current sheet
Sheet.read<AppStyle>().backgroundColor;

or with special sheet

Sheet.read<AppStyle>('dart').backgroundColor;
  • Change current sheet
Sheet.apply<AppStyle>('dart');

Extension

If you want to change sheet value as soon as call Sheet.apply:

  • In StatefulWidget, use:
class _MyHomePageState extends State<MyHomePage>
    with SheetCollectionsUse<MyHomePage, AppStyle> {

    ...
    sheet.backgroundColor
    // or
    readSheet('dart').backgroundColor
    ...
}
  • Other Widget, use:
SheetBuilder<AppStyle>(builder: (context, sheet) {

    ...
    sheet.backgroundColor
    ...
}),

SheetManager using Providers

Initialization

class ProvidersApp extends StatelessWidget {
  const CollectionsApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiSheetProvider(
      createSheets: {
        'default': [
          CreatorModel(() => AppStyle()),
          CreatorModel(() => const AppText())
        ],
        'dart': [CreatorModel(() => AppDartStyle())],
        'vi': [CreatorModel(() => AppTextVi())]
      },
      child: SheetConsumer<AppStyle>(
        builder: (context, sheet, child) => MaterialApp(
          title: 'Sheet Demo',
          theme: sheet.theme,
          home: const MyHomePage(),
        ),
      ),
    );
  }
}

Using

Read AppStyle with current sheet

SheetProvider.of<AppStyle>(context).backgroundColor;

or with special sheet

SheetProvider.of<AppStyle>(context, 'dart').backgroundColor;

Change current sheet

SheetProvider.apply<AppStyle>(context, 'dart');

Extension

If you want to change sheet value as soon as call Sheet.apply:

In StatefulWidget, use:

class _MyHomePageState extends State<MyHomePage>
    with MultiSheetProviderInUse<MyHomePage> {

    ...
    sheet<AppStyle>().backgroundColor
    // or
    readSheet<AppStyle>('dart').backgroundColor
    ...
}

other Widget, use:

SheetConsumer<AppStyle>(builder: (context, sheet, child) {

    ...
    sheet.backgroundColor
    ...
}),

Features and bugs

Please file feature requests and bugs at the issue tracker.