microfrontends 0.0.16

Flutter Application Framework

example/lib/main.dart

import 'package:example/examples.dart';
import 'package:flutter/material.dart';
import 'package:microfrontends/microfrontends.dart';

import 'app_widget.dart';
import 'header.dart';

void main() {
  runApp(Examples());
}

class Examples extends StateContainerWidget {
  const Examples({Key? key}) : super(key: key);

  @override
  initState(StateChunkSetter state) {
    state<AppWidget>(ExamplesGrid());
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: QueryBuilder<AppWidget>(builder: (context, widget, _) {
          return Column(
            children: [
              Header(widget: widget),
              Container(height: 2, color: Theme.of(context).dividerColor),
              Expanded(child: widget),
            ],
          );
        }),
      ),
    );
  }
}

class ExamplesGrid extends AppWidget {
  final title = 'Examples';

  const ExamplesGrid({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      final crossAxisCount = (constraints.biggest.width ~/ 220).clamp(1, 9999);
      return GridView.count(
        crossAxisCount: crossAxisCount,
        childAspectRatio: 5 / 3,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
        padding: const EdgeInsets.all(8.0),
        children: examples.map((e) => ExampleCard(child: e)).toList(),
      );
    });
  }
}

class ExampleCard extends StatelessWidget {
  final AppWidget child;

  const ExampleCard({Key? key, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final br = BorderRadius.circular(12);
    return Card(
      shape: RoundedRectangleBorder(borderRadius: br),
      elevation: 2,
      child: InkWell(
        borderRadius: br,
        onTap: () {
          context.setState(child);
        },
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            child.title,
            style: Theme.of(context)
                .textTheme
                .headline5!
                .copyWith(fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}