modal_stack_router

Description:

modal stack router

Modal stack router #
A Flutter library for creating modal flows and wizards commonly used on large screen platforms like desktop web. It uses modal_bottom_sheet for showing widgets in a modal and the stack_router library for building multi-step flows.
.
Example #
import 'package:modal_stack_router/modal_stack_router.dart';

class ExampleStackRoutes {
static const String firstRoute = 'firstRoute';
static const String secondRoute = 'secondRoute';
}

class ExampleStackRouter extends StatelessWidget {
const ExampleStackRouter({
Key? key,
}) : super(key: key);

@override
build(context) {
return StackRouter(
initialRoute: ExampleStackRoutes.firstRoute,
builder: (router) {
return [
StackRoute(
route: ExampleStackRoutes.firstRoute,
child: StackRouterScaffold(
height: 400,
width: 600,
child: Expanded(
child: Center(
child: ElevatedButton(
onPressed: () {
router.pushRoute(ExampleStackRoutes.secondRoute);
},
child: const Text(
"Go to second route",
style: TextStyle(color: Colors.white),
),
),
),
),
),
),
StackRoute(
route: ExampleStackRoutes.secondRoute,
child: StackRouterScaffold(
height: 450,
width: 600,
appBar: const StackRouterAppBar(
title: Text("I'm a Title", style: TextStyle(fontSize: 20)),
),
child: Expanded(
child: Container(
color: Colors.blue,
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
"I'm the second route",
style: TextStyle(
color: Colors.white,
),
),
const Padding(padding: EdgeInsets.only(top: 16)),
ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.white),
),
onPressed: () {
router.showSnackBar(
snackBar: const StackRouterSnackBar(
title: Text(
"I'm a snackbar!",
style: TextStyle(color: Colors.white),
),
),
);
},
child: const Text(
"Show snack bar",
style: TextStyle(color: Colors.black),
),
),
],
),
),
),
),
),
];
},
);
}
}

// Show our modal stack router flow
showModalStackRouter(
context: context,
child: const ExampleStackRouter(),
);
copied to clipboard
Run the example to see it in action.