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.
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.
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
}
- 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));
}
There are two examples in the example application package.