pueprint 0.0.7
pueprint: ^0.0.7 copied to clipboard

A Flutter package to make flows and single pages much easier to lay out and style

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:vrouter/vrouter.dart';
import 'package:pueprint/pueprint.dart';

void main() {
  runApp(
    PueProvider(
      builder: (context) => VRouter(
        debugShowCheckedModeBanner: false,
        routes: [
          VWidget(path: '/', widget: HomePage()),
          VNester(
            path: null,
            widgetBuilder: (child) => FlowWrapperPage(child: child),
            nestedRoutes: [
              VWidget(path: "/1", widget: Flow1Page()),
              VWidget(path: '/2', widget: Flow2Page()),
            ],
          ),
          VWidget(path: '/solo', widget: SoloPage()),
        ],
      ),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () => context.vRouter.push("/1"),
          child: Text('to flow'),
        ),
        ElevatedButton(
          onPressed: () => context.vRouter.push("/solo"),
          child: Text('to solo page'),
        )
      ],
    );
  }
}

class FlowWrapperPage extends StatelessWidget {
  final Widget child;

  FlowWrapperPage({required this.child});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Pueprint(
        appBarBuilder: (context, state) => AppBar(
          leading: IconButton(
            icon: Icon(state.icon),
            onPressed: state.onTapLeading,
          ),
          title: state.title,
        ),
        footerBuilder: (context, state) => PueFooter(
          bottom: AnimatedSmoothIndicator(
            activeIndex: state.activeStep - 1,
            count: 2,
            effect: WormEffect(),
          ),
          child: ElevatedButton(
            child: state.buttonChild,
            onPressed: state.onTap,
          ),
        ),
        body: child,
      ),
    );
  }
}

class Flow1Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PuePage(
      appBar: BasicAppBar(),
      footerData: FooterData(
        activeStep: 1,
        onTap: () => context.vRouter.push('/2'),
        buttonChild: Text('go to flow 2 page'),
      ),
      header: PueHeader(
        text: 'flow 1 header',
      ),
      body: PueBody(
        child: Text('flow 1 page'),
      ),
    );
  }
}

class Flow2Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PuePage(
      appBarData: AppBarData(
        icon: Icons.arrow_back,
        onTapLeading: () => context.vRouter.pop(),
      ),
      footerData: FooterData(
        activeStep: 2,
        onTap: () => context.vRouter.push('/2'),
        buttonChild: Text('go to flow 2 page'),
      ),
      header: PueHeader(
        text: 'flow 2 header',
      ),
      body: Center(
        child: Text('flow 2 page'),
      ),
    );
  }
}

class SoloPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SoloPuePage(
      body: PueBody(
        child: Center(
          child: Text('solo page'),
        ),
      ),
    );
  }
}
6
likes
120
pub points
0%
popularity

A Flutter package to make flows and single pages much easier to lay out and style

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, provider, universal_platform

More

Packages that depend on pueprint