responsive_scaffold 0.0.5+2 copy "responsive_scaffold: ^0.0.5+2" to clipboard
responsive_scaffold: ^0.0.5+2 copied to clipboard

discontinuedreplaced by: flutter_adaptive_scaffold
outdated

On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item.

responsive_scaffold #

On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item.

Getting Started #

  • You can use this in two modes ResponsiveScaffold and ResponsiveScaffold.builder.
  • On Mobile the ListView will push to the details screen

mobile

push

  • On Tablet it will show a Master Detail View.

tablet

  • You can add additional Slivers to the Scrollview and the AppBar is optional.

Example #

import 'package:flutter/material.dart';

import 'package:responsive_scaffold/responsive_scaffold.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveScaffold.builder(
        scaffoldKey: _scaffoldKey,
        detailBuilder: (BuildContext context, int index, bool tablet) {
          return DetailsScreen(
            appBar: AppBar(
              elevation: 0.0,
              title: Text("Details"),
              actions: [
                IconButton(
                  icon: Icon(Icons.share),
                  onPressed: () {},
                ),
                IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () {
                    if (!tablet) Navigator.of(context).pop();
                  },
                ),
              ],
            ),
            body: Container(
              child: Center(
                child: Text("Item: $index"),
              ),
            ),
          );
        },
        slivers: <Widget>[
          SliverAppBar(
            title: Text("App Bar"),
          ),
        ],
        // bottomNavigationBar: BottomAppBar(
        //   child: Container(
        //     height: 50.0,
        //     color: Colors.green,
        //   ),
        // ),
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            leading: Text(index.toString()),
          );
        },
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            _scaffoldKey.currentState.showSnackBar(SnackBar(
              content: Text("Snackbar!"),
            ));
          },
        ),
      ),
    );
  }
}

176
likes
0
pub points
64%
popularity

Publisher

verified publisherfluttercommunity.dev

On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on responsive_scaffold