What do you think about such outlines?

Looks good to me and provides short overview of a section.

Animated side view

https://gist.github.com/hawkkiller/032ccc81c01bc0754340b7ef138e8ce8

Master popups in Flutter: dropdowns, overlays, menus, and more.

https://lazebny.io/popups-in-flutter/

Some of my plans for June:

- land a few updates to Sizzle starter (improved http client, tests, structure and docs)
- write RTE (rich text editor) specification (I’m planning to build editor some time I have clear understanding of all the details)
- article about Focus in flutter (tab traversal, shortcuts, screen reader, how does it work under the hood)

Avoid these dart libraries. Briefly about their drawbacks and better alternatives.
https://lazebny.io/avoid-these-dart-libraries/

#flutter #flutterdev #dart

It was really fast! ❤️

https://github.com/hawkkiller/spider_chart

New article is coming on Monday. It is about Focus System - Focus Tree, Traversal and Key Events!

Meet the new article about focus in flutter!

https://lazebny.io/focus-in-flutter/

Tomorrow, I'm launching a new article series on creating UI Kits.

I’ll guide you through developing various components like buttons, text fields, and more.

You’ll also learn about animations, transitions, iconography, responsive design tools, and best practices for layouts and custom components.

#article #uikit #flutter

Creating the Perfect UI Kit in Flutter, Part One! Theme, typography, buttons, text fields and more in this comprehensive article:

https://lazebny.io/creating-ui-kit-in-flutter-1

#tip

If you're using SharedPreferences (or any other key-value storage) consider creating a separate class that manages the entry.

This way, you ensure that the key is the same during setting and reading as well as simply convenient and powerful as you may create custom codecs and support complex types.

See source code here

How to implement design breakpoints correctly:

Define a class that contains breakpoints for your app, usually it contains 2-3 values:

enum WindowSize {
  compact._(0, 600),
  medium._(600, 839),
  expanded._(840, 1199),
  large._(1200, 1599),
  extraLarge._(1600, double.infinity);

  /// The minimum width of the breakpoint.
  final double min;

  /// The maximum width of the breakpoint.
  final double max;

  const WindowSize._(this.min, this.max);
}

Define a scope that provides this WindowSize down the context:

/// Scope that provides [WindowSize] to its descendants.
class WindowSizeScope extends StatefulWidget {
  /// Creates a [WindowSizeScope] that provides [WindowSize] to its descendants.
  const WindowSizeScope({
    required this.child,
    super.key,
  });

  /// The widget below this widget in the tree.
  final Widget child;

  /// Returns the [WindowSize] of the nearest [WindowSizeScope] ancestor.
  static WindowSize of(BuildContext context, {bool listen = true}) {
    final inherited = listen
        ? context.dependOnInheritedWidgetOfExactType<_InheritedWindowSize>()
        : context.findAncestorWidgetOfExactType<_InheritedWindowSize>();

    return inherited?.windowSize ??
        (throw FlutterError('WindowSizeScope was not found in the widget tree'));
  }

  @override
  State<WindowSizeScope> createState() => _WindowSizeScopeState();
}

class _WindowSizeScopeState extends State<WindowSizeScope> with WidgetsBindingObserver {
  late WindowSize _windowSize;

  Size _getScreenSize() {
    final view = PlatformDispatcher.instance.views.first;
    return view.physicalSize / view.devicePixelRatio;
  }

  @override
  void initState() {
    _windowSize = WindowSize.fromWidth(_getScreenSize().width);
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  @override
  void didChangeMetrics() {
    final windowSize = WindowSize.fromWidth(_getScreenSize().width);

    if (_windowSize != windowSize) {
      setState(() => _windowSize = windowSize);
    }
    super.didChangeMetrics();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => _InheritedWindowSize(
        windowSize: _windowSize,
        child: widget.child,
      );
}

Then get this value from the BuildContext and do whatever you want:

final windowSize = WindowSize.of(context);

if (windowSize.isExpanded) return ExpandedWidget();

if (windowSize.isMedium) return MediumWidget();

Here are the sources