flutter_next 1.0.0

Responsive layout, themed controls, and motion for Flutter.

flutter_next

Responsive layout and controls for Flutter. Columns, type, and visibility follow the parent width, not the screen.

import 'package:flutter_next/flutter_next.dart';

Import that library only. lib/src is not a supported path. Motion comes from animation_next, which this package re-exports.

dependencies:
  flutter_next: ^1.0.0

Requires Dart 3.8 and Flutter 3.32.

Layout follows the parent

NextScope measures the width it is given. A row inside a 720px frame is md even when the window is wider. Without a scope, widgets fall back to the screen width and the Bootstrap defaults: 12 columns, 16px gutter.

NextScope(
  child: NextRow(
    children: [
      NextCol(
        span: const NextSpan(xs: 12, md: 6, lg: 4),
        child: const Text('One'),
      ),
      NextCol(
        span: const NextSpan(xs: 12, md: 6, lg: 4),
        child: const Text('Two'),
      ),
      NextCol(
        span: const NextSpan(xs: 12, md: 6, lg: 4),
        child: const Text('Three'),
      ),
    ],
  ),
)

NextSpan is mobile-first. A set value applies at that breakpoint and every wider one. NextSpan(md: 6) is full width below 768 and half width from 768 up. NextSpan.parse('col-12 col-md-6') exists for migration. col-12 means xs.

NextGrid gives every child the same span:

NextGrid(
  span: const NextSpan(xs: 12, md: 6, lg: 4),
  children: const [Text('One'), Text('Two'), Text('Three')],
)

Nest another NextScope to change the gutter, column count, or container widths for one subtree.

Breakpoints

	xs	sm	md	lg	xl	xxl
Min width	0	576	768	992	1200	1400
Container max	full	540	720	960	1140	1320

NextContainer centers content at the max width for the parent breakpoint. fluid: true uses the full parent.

The same cascade, for anything

NextValue uses the same mobile-first walk as a span.

final padding = NextValue<double>(xs: 8, md: 16, lg: 28).resolve(context);

NextShow shows a subtree for a range of breakpoints. from is inclusive and until is exclusive. only lists exact breakpoints. Anything else renders fallback.

NextShow(
  from: Breakpoint.lg,
  fallback: const Text('Narrow'),
  child: const Text('Wide'),
)

Controls

Buttons, alerts, surfaces, and avatars read NextColors, a ThemeExtension taken from the current ColorScheme.

NextButton(
  onPressed: () {},
  child: const Text('Filled'),
)

NextButton(
  onPressed: () {},
  variant: NextButtonVariant.outlined,
  child: const Text('Outlined'),
)

NextSurface(
  variant: NextVariant.primary,
  child: const Text('Primary'),
)

NextButton.itemBuilder replaces the label when you need a hover-aware child. HoverWidget reports pointer hover through MouseRegion. NextAccordion wraps ExpansionTile. NextAlert is a variant-colored banner. NextShadow.shadow100(context) returns theme-aware BoxShadows.

Motion

One NextMotion describes opacity, translation, scale, and rotation. NextMotionView plays it. The controller lasts delay + duration, and the curve runs after the delay. MediaQuery.disableAnimationsOf jumps an entrance or exit to its end.

child.fadeIn(variant: NextFadeIn.fadeInUp);

NextStagger(
  motion: NextMotion.fadeIn(NextFadeIn.fadeInUp),
  children: cards,
);

playWhenVisible: true waits until the widget is on screen. See animation_next for slide, zoom, flip, bounce, and NextColorTween.

Scrolling

A pointer-scroll delta eases toward its target, including a burst of small notches. Touch drags still move on the frame they arrive. Scrollbars and Shift+wheel stay with ScrollBehavior.

NextSmoothScroll is the same widget around a page or around one list. home is the app-wide place, because it sits inside the route. MaterialApp.scrollBehavior and MaterialApp.builder do not attach: the route's own plain scroll controller is closer to the page.

MaterialApp(
  home: NextSmoothScroll(
    child: const LandingPage(),
  ),
)

list.nextSmoothScroll()

ListView(
  controller: NextScrollController(
    config: NextScrollConfig.linear(),
  ),
)

NextScrollConfig.lenis is the default. linear closes the gap over a duration, elastic springs toward the target, and direct applies the notch on the same frame. A list that already passes controller: keeps that controller, so replace it with NextScrollController when that list should ease. A horizontal list opts in with scrollDirection: Axis.horizontal.

Extensions

context.width
'flutter'.capitalize()
false.toggle()
widget.pad(20)
widget.onTap(() {})
[widget].column()

Contributors

This list is generated from the GitHub contributors graph and updates as people commit.

Made with contrib.rocks.

License

MIT. See LICENSE.