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

Recommended libraries for Dart & Flutter:

https://lazebny.io/recommended-libraries-for-dart-flutter

#article

Let's talk about dependency injection (DI) in the next article?

👍 / 👎

Just a very funny package to use when your client did not pay you 😂

https://pub.dev/packages/flutter_not_paid

A very cool presentation by Vyacheslav Egorov about the inner workings of Dart.

Using the example of two for-loops, he explains and demonstrates how to determine when the compiler generates suboptimal code and how to deal with it.

Additionally, the speaker showcases how to achieve Hot Reload by integrating Dart with SwiftUI and Jetpack Compose through FFI.

Highly recommended for viewing.

📌 Presentation

#video
#ohmyteam
#ohmyfedukenukem

🤟 We've recently developed a simple plugin for Flutter that allows you to create custom wraps for the widgets you want!

Grab it here

Great news! I have launched boosty, so if you had problems with payments, you can now try this method.

https://boosty.to/mlazebny

A small example of how a generic bloc looks like:

https://gist.github.com/hawkkiller/c17563201247e53f2c1b0295f37e8903

Coming tomorrow