responsive_layout_builder 0.2.1

Flutter package for building responsive layout based on screen sizes. It could be wristwatch, small mobile, average mobile, tablet or desktop.

example/lib/main.dart

import 'package:flutter/material.dart';

import 'package:responsive_layout_builder/responsive_layout_builder.dart';

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

class MyApp extends StatefulWidget {
  final navigatorKey = GlobalKey<NavigatorState>();
  final scaffoldKey = GlobalKey<ScaffoldState>();

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

class _MyAppState extends State<MyApp> {
  static const Map<LayoutSize, String> enumToString = {
    LayoutSize.watch: 'Wristwatch',
    LayoutSize.smallMobile: 'Small Mobile',
    LayoutSize.smallMobilePortrait: 'Small Mobile Portrait',
    LayoutSize.smallMobileLandscape: 'Small Mobile Landscape',
    LayoutSize.middleMobile: 'Mobile',
    LayoutSize.middleMobilePortrait: 'Mobile Portrait',
    LayoutSize.middleMobileLandscape: 'Mobile Landscape',
    LayoutSize.tabletOrDesktop: 'Tablet or Desktop',
    LayoutSize.tv: 'TV',
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: widget.navigatorKey,
      home: Scaffold(
        key: widget.scaffoldKey,
        appBar: AppBar(
          title: const Text('Responsive Layout Builder Example App'),
        ),
        body: ResponsiveLayoutBuilder(
          builder: (context, size) => Center(child: Text(enumToString[size])),
        ),
      ),
    );
  }
}