flutter_adaptive_scaffold

adaptive_layout_demo1.dart

// ignore_for_file: public_member_api_docs
import 'package:flutter/material.dart';
import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final List<Widget> children = List<Widget>.generate(10, (int index) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          color: const Color.fromARGB(255, 255, 203, 32),
          height: 400,
        ),
      );
    });

    return ColoredBox(
      color: Colors.white,
      child: AdaptiveLayout(
        internalAnimations: false,
        topNavigation: SlotLayout(
          config: <Breakpoint, SlotLayoutConfig>{
            Breakpoints.smallAndUp: SlotLayout.from(
              key: const Key('topNavigation'),
              builder: (_) => const TopNavigationBar(),
            ),
          },
        ),
        body: SlotLayout(
          config: <Breakpoint, SlotLayoutConfig>{
            Breakpoints.smallAndUp: SlotLayout.from(
              key: const Key('body'),
              builder: (_) => Center(
                child: ConstrainedBox(
                  constraints: const BoxConstraints(maxWidth: 750),
                  child: Scaffold(
                    backgroundColor: Colors.white,
                    body: GridView.count(crossAxisCount: 2, children: children),
                  ),
                ),
              ),
            )
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(final BuildContext context) {
    return Material(
      elevation: 2,
      child: ColoredBox(
        color: Colors.white,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 56),
          child: Row(
            children: const <Widget>[FlutterLogo()],
          ),
        ),
      ),
    );
  }
}