adaptive_page_layout 0.2.4

A simple way to build adaptive layouts for your Flutter app.

Adaptive Page Layout

A simple way to build adaptive layouts for your Flutter app.

Getting Started

Use this widget as the home of your MaterialApp for example and as a replacement of the Navigator:

MaterialApp(
    title: 'My App',
    home: AdaptivePageLayout(
        onGenerateRoute: onGenerateRoute,
        initialRoute: '/',
        topBarBuilder: (context) => Container(),
        dividerWidth: 1,
        dividerColor: Theme.of(context).dividerColor,
        routeBuilder: (builder, settings) =>
            CupertinoPageRoute(builder: builder),
    ),
    )

It will use a default Navigator on less wide screens like mobile phones and a 2 or 3 column layout on wide screens.

You have to define onGenerateRoute to set the existing routes of your app:

ViewData onGenerateRoute(RouteSettings settings) {
    switch(settings.name) {
        case '/': return ViewData(
            displayTopBar: false,
            mainView: (_) => MyHomeView(),
        );
        case '/dashboard': return ViewData(
            displayTopBar: false,
            leftView: (_) => MyNavigationView(),
            emptyView: (_) => EmptyView(),
        );
        case '/dashboard/content': return ViewData(
            displayTopBar: false,
            leftView: (_) => MyNavigationView(),
            mainView: (_) => MyContentView(),
        );
    }
}

Set initialRoute to set the initial route and columnWidth to change the maximum width of the left and right columns. topBar provides a way to display a custom topBar which you can display or hide using the ViewData. routeBuilder lets your control which RouteBuilder is used when the app is in 1-column mode.