multiple_screens 0.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 62

multiple_screens #

pub package Build Status

A Flutter plugin to determine whether the device supports multiple screens and whether the app is currently spanned across both screen.

Usage #

import 'package:multiple_screens/multiple_screens.dart';

Determine whether the app is run on a multiple screen device

bool isMultipleDevice = await MultipleScreens.isMultipleScreensDevice;

Determine whether the app is currently spanned across both screens

bool isAppSpanned = await MultipleScreens.isAppSpanned;

Subscribing to app spanned across both screen stream

MultipleScreens.isAppSpannedStream().listen(
  (data) => setState(() => _isAppSpannedStream = data)
);

Using the MultipleScreensScaffold widget

MultipleScreensScaffold(
  //Must supply whether the app is spanned
  //This can be the result of the app spanned stream
  appSpanned
  //left and right must be specified without body
  //or body must be specified without left and right
  left
  right
  body
)

Getting Started #

See the example directory for a complete sample app

Issues and feedback #

Please file issues, bugs, or feature requests in our github issue tracker.

Changelog #

0.2.0 26th Match 2020 - Project rename #

  • Project renamed from dual_screen to multiple_screens

0.1.0 25th March 2020 - MultipleScreensScaffold widget support #

  • A new MultipleScreensScaffold widget which allows either multiple scaffolds or other widgets to be supplied to be shown on each screen
  • Build pipeline support

0.0.2-dev #

  • Provide a stream to determine when the app is spanned across both screens

0.0.1-dev #

  • Initial release

example/lib/main.dart

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:multiple_screens/multiple_screens.dart';

void main() => runApp(
      MaterialApp(
        title: 'Multiple Screens',
        home: HomeScreen(),
      ),
    );

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Multiple Screens example'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                RaisedButton(
                  child: Text('Drag drop screen example'),
                  onPressed: () => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DragDropScreen(),
                    ),
                  ),
                ),
                RaisedButton(
                  child: Text('Multi screen methods example'),
                  onPressed: () => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => MultipleScreensMethodsScreen(),
                    ),
                  ),
                ),
                RaisedButton(
                  child: Text('Multi screen scaffold example'),
                  onPressed: () => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => MultipleScreensScaffoldScreen(),
                    ),
                  ),
                ),
                RaisedButton(
                  child: Text('Multi screen scaffold using body example'),
                  onPressed: () => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => MultipleScreensScaffoldBodyScreen(),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
}

class DragDropScreen extends StatefulWidget {
  @override
  _DragDropScreenState createState() => _DragDropScreenState();
}

class _DragDropScreenState extends State<DragDropScreen> {
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
  bool _isAppSpannedStream = false;

  @override
  void initState() {
    super.initState();
    MultipleScreensMethods.isAppSpannedStream().listen(
      (data) => setState(() => _isAppSpannedStream = data),
    );
  }

  @override
  Widget build(BuildContext context) => MultipleScreensScaffold(
        appSpanned: _isAppSpannedStream,
        left: Scaffold(
          appBar: AppBar(
            title: Text('Multiple Screens drag and drop example'),
          ),
          body: Center(
            child: Container(
              width: 100.0,
              height: 100.0,
              child: Draggable(
                data: "32",
                child: Container(
                  width: 100.0,
                  height: 100.0,
                  child: Center(
                    child: Text(
                      "Data",
                      style: TextStyle(color: Colors.white, fontSize: 22.0),
                    ),
                  ),
                  color: Colors.pink,
                ),
                feedback: Container(
                  width: 100.0,
                  height: 100.0,
                  child: Center(
                    child: Text(
                      "Data",
                      style: TextStyle(color: Colors.white, fontSize: 22.0),
                    ),
                  ),
                  color: Colors.pink,
                ),
              ),
            ),
          ),
        ),
        right: Scaffold(
          key: _scaffoldKey,
          appBar: AppBar(
            title: Text(''),
            automaticallyImplyLeading: false,
          ),
          body: Center(
            child: Container(
              width: 100.0,
              height: 100.0,
              color: Colors.blue,
              child: DragTarget(
                builder: (context, List<int> candidateData, rejectedData) =>
                    Center(
                  child: Text(
                    "Landing",
                    style: TextStyle(color: Colors.white, fontSize: 22.0),
                  ),
                ),
                onWillAccept: (data) => true,
                onAccept: (data) {
                  _scaffoldKey.currentState.showSnackBar(
                    SnackBar(
                      content: Text("You dropped some data!"),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      );
}

class MultipleScreensMethodsScreen extends StatefulWidget {
  final bool isAppSpannedStream;

  const MultipleScreensMethodsScreen({
    Key key,
    this.isAppSpannedStream,
  }) : super(key: key);

  @override
  _MultipleScreensMethodsScreenState createState() =>
      _MultipleScreensMethodsScreenState();
}

class _MultipleScreensMethodsScreenState extends State<MultipleScreensMethodsScreen> {
  bool _isMultipleScreensDevice;
  bool _isAppSpanned;
  bool _isAppSpannedStream = false;

  @override
  void initState() {
    super.initState();
    MultipleScreensMethods.isAppSpannedStream().listen(
      (data) => setState(() => _isAppSpannedStream = data),
    );
  }

  Future<void> _updateMultipleScreensInfo() async {
    bool isMultiDevice = await MultipleScreensMethods.isMultipleScreensDevice;
    bool isAppSpanned = await MultipleScreensMethods.isAppSpanned;

    if (!mounted) return;

  setState(() {
      _isMultipleScreensDevice = isMultiDevice;
      _isAppSpanned = isAppSpanned;
    });
  }

  @override
  Widget build(BuildContext context) => MultipleScreensScaffold(
        appSpanned: _isAppSpannedStream,
        appBar: AppBar(
          title: Text('Multiple Screens example'),
        ),
        left: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Multi device: ${_isMultipleScreensDevice ?? 'Unknown'}'),
              SizedBox(height: 8),
              Text('App spanned: ${_isAppSpanned ?? 'Unknown'}'),
              SizedBox(height: 8),
              RaisedButton(
                child: Text('Manually determine multi device and app spanned'),
                onPressed: () => _updateMultipleScreensInfo(),
              ),
              SizedBox(height: 64),
              Text(
                'App spanned stream: ${_isAppSpannedStream ?? 'Unknown'}',
              ),
            ],
          ),
        ),
        right: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('second screen'),
            ],
          ),
        ),
      );
}

class MultipleScreensScaffoldScreen extends StatefulWidget {
  final bool isAppSpannedStream;

  const MultipleScreensScaffoldScreen({
    Key key,
    this.isAppSpannedStream,
  }) : super(key: key);

  @override
  _MultipleScreensScaffoldScreenState createState() =>
      _MultipleScreensScaffoldScreenState();
}

class _MultipleScreensScaffoldScreenState extends State<MultipleScreensScaffoldScreen> {
  bool _isAppSpannedStream = false;

  @override
  void initState() {
    super.initState();
    MultipleScreensMethods.isAppSpannedStream().listen(
      (data) => setState(() => _isAppSpannedStream = data),
    );
  }

  @override
  Widget build(BuildContext context) => MultipleScreensScaffold(
        appSpanned: _isAppSpannedStream,
        left: MultipleScreensScaffoldScreenNavigationExampleFirstScreen(),
        right: MultipleScreensScaffoldScreenNavigationExampleSecondScreen(),
      );
}

class MultipleScreensScaffoldScreenNavigationExampleFirstScreen
    extends StatefulWidget {
  @override
  _MultipleScreensScaffoldScreenNavigationExampleFirstScreenState createState() =>
      _MultipleScreensScaffoldScreenNavigationExampleFirstScreenState();
}

class _MultipleScreensScaffoldScreenNavigationExampleFirstScreenState
    extends State<MultipleScreensScaffoldScreenNavigationExampleFirstScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First appbar'),
        actions: [
          IconButton(
            icon: Icon(Icons.tune),
            onPressed: () {},
          )
        ],
      ),
      body: Center(
        child: Text('This is the first screen'),
      ),
    );
  }
}

class MultipleScreensScaffoldScreenNavigationExampleSecondScreen
    extends StatefulWidget {
  @override
  _MultipleScreensScaffoldScreenNavigationExampleSecondScreenState createState() =>
      _MultipleScreensScaffoldScreenNavigationExampleSecondScreenState();
}

class _MultipleScreensScaffoldScreenNavigationExampleSecondScreenState
    extends State<MultipleScreensScaffoldScreenNavigationExampleSecondScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          )
        ],
        title: Text('Second appbar'),
      ),
      body: Center(
        child: Text('This is the second screen'),
      ),
    );
  }
}

class MultipleScreensScaffoldBodyScreen extends StatefulWidget {
  final bool isAppSpannedStream;

  const MultipleScreensScaffoldBodyScreen({
    Key key,
    this.isAppSpannedStream,
  }) : super(key: key);
  @override
  _MultipleScreensScaffoldBodyScreenState createState() =>
      _MultipleScreensScaffoldBodyScreenState();
}

class _MultipleScreensScaffoldBodyScreenState
    extends State<MultipleScreensScaffoldBodyScreen> {
  bool _isAppSpannedStream = false;

  @override
  void initState() {
    super.initState();
    MultipleScreensMethods.isAppSpannedStream().listen(
      (data) => setState(() => _isAppSpannedStream = data),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MultipleScreensScaffold(
      appSpanned: _isAppSpannedStream,
      appBar: AppBar(
        title: Text('Multiple Screens scaffold using body example'),
      ),
      body: Center(
        child: Text('Example text'),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  multiple_screens: ^0.2.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:multiple_screens/multiple_screens.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
25
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
62
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform ios

Because of import path [package:multiple_screens/multiple_screens.dart] that declares support for platforms: android

Package does not support Flutter platform linux

Because of import path [package:multiple_screens/multiple_screens.dart] that declares support for platforms: android

Package does not support Flutter platform macos

Because of import path [package:multiple_screens/multiple_screens.dart] that declares support for platforms: android

Package does not support Flutter platform web

Because of import path [package:multiple_screens/multiple_screens.dart] that declares support for platforms: android

Package does not support Flutter platform windows

Because of import path [package:multiple_screens/multiple_screens.dart] that declares support for platforms: android

Package not compatible with SDK dart

because of import path [multiple_screens] that is in a package requiring null.

Health suggestions

Format lib/multiple_screens_scaffold.dart.

Run flutter format to format lib/multiple_screens_scaffold.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test