Coder Social home page Coder Social logo

erfanjazebnikoo / scaffold_factory Goto Github PK

View Code? Open in Web Editor NEW
11.0 3.0 3.0 363 KB

A Flutter plugin to build and customize the Flutter's scaffold widget with simple and flexible configurations.

Home Page: https://pub.dartlang.org/packages/scaffold_factory

License: BSD 2-Clause "Simplified" License

Java 1.91% Objective-C 2.20% Dart 92.02% Ruby 3.87%
flutter-plugin dart2 scaffold dartlang flutter

scaffold_factory's Introduction

Scaffold Factory

Pub

A Flutter plugin to build and customize the Flutter's scaffold widget with simple and flexible configurations. Also, this plugin provides various implementations of useful widgets that can be used in UI design. The scaffold is a class provides APIs for showing drawers, snack bars, and bottom sheets.

With Scaffold Factory Plugin you can:

  • Build a beautiful screen with easy steps.
  • Create and customize an App bar, Bottom navigation Bar, Floating Action Button and other materials widget using many defined methods.
  • Customize and show the Snack Bar with a simple method.
  • Launch URL in a web browser with a simple method.
  • Implement material color palette for scaffold and use it whenever you want.
  • Fire and handle any types of events using the Event Bus between widgets which use the same scaffold factory.

Also, you can pass the Scaffold Factory to your widgets or routes and, use whatever you need about context, color palette or other widgets.

How to use

Import the package

To use this plugin, add scaffold_factory as a dependency in your pubspec.yaml file. Also, You can use Dart packages' install instruction for this package.

Use the plugin

1- Add the following import to your Dart code:

import 'package:scaffold_factory/scaffold_factory.dart';

2- Define these private variables inside your widget.

final _scaffoldKey = GlobalKey<ScaffoldState>();
ScaffoldFactory _scaffoldFactory;
MaterialPalette _sampleColorPalette = MaterialPalette(
  primaryColor: Colors.teal,
  accentColor: Colors.pinkAccent,
);

3- Your state class can Implements ScaffoldFactoryBehaviors interface:

class _ExampleScaffoldFactoryState extends State<ExampleScaffoldFactory> implements ScaffoldFactoryBehaviors {
  
  // body
 
  @override
  void onBackButtonPressed() {
    print("Scaffold Factory => onBackButtonPressed()");
  }

  @override
  void onFloatingActionButtonPressed() {
    print("Scaffold Factory => onFloatingActionButtonPressed()");
  }

  @override
  Future onEventBusMessageReceived(event) async {
    print("ScaffoldFactory: Event Received");
  }
}    

4- Initialize ScaffoldFactory with the scopes you want:

 @override
  void initState() {
    super.initState();
    _initScaffoldFactory();
  }
  
  void _initScaffoldFactory() {
    _scaffoldFactory = ScaffoldFactory(
      scaffoldKey: _scaffoldKey,
      materialPalette: _sampleColorPalette,
    );
    _scaffoldFactory.scaffoldFactoryBehavior = this;

    _scaffoldFactory.init(
      backgroundType: BackgroundType.normal,
      appBarVisibility: false,
      floatingActionButtonVisibility: false,
      drawerVisibility: false,
      nestedAppBarVisibility: false,
      bottomNavigationBarVisibility: false,
    );
  }

5- Pass the body widget to build method of your _scaffoldFactory object and define your theme of texts:

@override
Widget build(BuildContext context) {
  _scaffoldFactory.textTheme = Theme.of(context).textTheme;

  return _scaffoldFactory.build(_buildBody(context));
}

Widget _buildBody(BuildContext context) {
  // return your body widget    
}

Features

  • Easily create a material interface with simple configurations.
  • There is an implementation for each of scaffold's widget like the AppBar, BottomNavigationBar, FloatingActionButton, etc.
Method Output
buildAppBar AppBar widget
buildNestedScrollView NestedScrollView widget
buildBottomNavigationBar BottomNavigationBar widget
buildBottomAppBar BottomAppBar widget
buildFloatingActionButton FloatingActionButton widget
  • You can change the visibility of scaffold's widgets and pass your custom widget in the init method
 _scaffoldFactory.init(
      appBarVisibility: true,
      appBar: _scaffoldFactory.buildAppBar(
        titleVisibility: true,
        leadingVisibility: false,
        tabBarVisibility: false,
        titleWidget: Text('Scaffol Factory Example'),
        backgroundColor: _scaffoldFactory.colorPalette.primaryColor,
      ),
    );

or whenever you want in the build method of your state.

@override
Widget build(BuildContext context) {
  _scaffoldFactory.textTheme = Theme.of(context).textTheme;
  
  _scaffoldFactory.appBarVisibility = true;
  _scaffoldFactory.appBar = _scaffoldFactory.buildAppBar(
      titleVisibility: true,
      leadingVisibility: false,
      tabBarVisibility: false,
      titleWidget: Text('Scaffol Factory Example'),
      backgroundColor: _scaffoldFactory.colorPalette.primaryColor,
    );

  return _scaffoldFactory.build(_buildBody(context));
}

Example

There are two examples in the example application package.

Solid Solid Solid Solid

scaffold_factory's People

Contributors

erfanjazebnikoo avatar samin-safaei avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

scaffold_factory's Issues

onBackButtonPressed doesn't work

The functionality of onBackButtonPressed is supposed to be called when the user presses device back button. Currently onBackButtonPressed is only a behavior which should be called manually. The second issue is that usually the onBackButtonPressed method has a way of canceling the default system behavior by returning false (i.e. showing a dialog which cancels exit). In case of flutter the normal onBackButtonPressed method must return Future<bool>. Check this link for more information on how to really implement onBackButtonPressed.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.