Flutter Breakpoints

Flutter Breakpoints is a flexible package designed to help you manage responsive layouts in Flutter applications by defining specific breakpoints for different screen sizes.

Table of Contents

Demonstrations

Below are GIFs demonstrating how the flutter_breakpoints package adapts layouts across different screen sizes. This visual representation helps illustrate the package's responsive design capabilities.

Demo Breakpoints

Installation

Add the flutter_breakpoints dependency to your pubspec.yaml file:

dependencies:
  flutter_breakpoints: ^1.0.0

Getting Started

Basic Setup

First, wrap your application with the FlutterBreakpointProvider in the MaterialApp:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Breakpoints',
      builder: (context, child) => FlutterBreakpointProvider.builder( // 👋
        context: context,                                             //
        child: child,                                                 //
      ),                                                              //
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const ResponsivePage(),
    );
  }
}

Implementing Responsive Layouts

Inside your pages or widgets, utilize the Breakpoints class to adjust the layout according to the device width:

class ResponsivePage extends StatelessWidget {
  const ResponsivePage({super.key});

  @override
  Widget build(BuildContext context) {
    final isMobile = Breakpoints.mobile.isBreakpoint(context);   // 👋
    final isTablet = Breakpoints.tablet.isBreakpoint(context);   // 
    final isDesktop = Breakpoints.desktop.isBreakpoint(context); // 

    if (isMobile) {
      return buildMobileLayout();
    } else if (isTablet) {
      return buildTabletLayout();
    } else if (isDesktop) {
      return buildDesktopLayout();
    }

    return const SizedBox.shrink();
  }

  Widget buildMobileLayout() => Center(child: Text('Mobile Layout'));
  Widget buildTabletLayout() => Center(child: Text('Tablet Layout'));
  Widget buildDesktopLayout() => Center(child: Text('Desktop Layout'));
}

Customizing Breakpoints

To customize breakpoints, define custom breakpoints in a separate class called MyBreakpoints. Here's how you can do it:

class MyBreakpoints {
  MyBreakpoints._();
  static FlutterBreakpoint smallPhone = const FlutterBreakpoint(name: 'smallPhone', minWidth: 0);
  static FlutterBreakpoint largePhone = const FlutterBreakpoint(name: 'largePhone', minWidth: 400);
  static FlutterBreakpoint smallTablet = const FlutterBreakpoint(name: 'smallTablet', minWidth: 700);
  static FlutterBreakpoint largeTablet = const FlutterBreakpoint(name: 'largeTablet', minWidth: 900);

  static List<FlutterBreakpoint> get breakpoints => [
    smallPhone,
    largePhone,
    smallTablet,
    largeTablet,
  ];
}

Using Custom Breakpoints in Your Application

Use your custom breakpoints in the FlutterBreakpointProvider:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Breakpoints',
      builder: (context, child) => FlutterBreakpointProvider.builder( // 
        context: context,                                             //
        child: child,                                                 //
        breakpoints: MyBreakpoints.breakpoints,                       // 👋 custom
      ),
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const CustomResponsivePage(),
    );
  }
}

class CustomResponsivePage extends StatelessWidget {
  const CustomResponsivePage({super.key});

  @override
  Widget build(BuildContext context) {
    final isSmallPhone = MyBreakpoints.smallPhone.isBreakpoint(context); // 👋 custom
    final isLargePhone = MyBreakpoints.largePhone.isBreakpoint(context); // 
    final isSmallTablet = MyBreakpoints.smallTablet.isBreakpoint(context);//
    final isLargeTablet = MyBreakpoints.largeTablet.isBreakpoint(context);//

    if (isSmallPhone) {
      return Center(child: Text('Small Phone Layout'));
    } else if (isLargePhone) {
      return Center(child: Text('Large Phone Layout'));
    } else if (isSmallTablet) {
      return Center(child: Text('Small Tablet Layout'));
    } else if (isLargeTablet) {
      return Center(child: Text('Large Tablet Layout'));
    }

    return const SizedBox.shrink();
  }
}

Examples

For a comprehensive demonstration of how to implement and customize breakpoints using the flutter_breakpoints package, please refer to the example available in the Example tab. This detailed example showcases the package's usage and demonstrates how to effectively handle different screen sizes.

Libraries

flutter_breakpoints