Using responsive_toolkit

medium_responsive_flutter_4.dart

@override
Widget build(BuildContext context) {
  final cardBreakpoints = Breakpoints(
    xs: const ResponsiveColumnConfig(span: 12),
    md: const ResponsiveColumnConfig(span: 6),
    lg: const ResponsiveColumnConfig(span: 3),
  );

  final containerMaxWidth = ResponsiveLayout.value(
    context,
    Breakpoints(
      xs: const BoxConstraints(),
      lg: const BoxConstraints.tightFor(width: 960),
      xl: const BoxConstraints.tightFor(width: 1140),
      xxl: const BoxConstraints.tightFor(width: 1320),
    ),
  );

  final textTheme = Theme.of(context).textTheme;
  final headlineStyle = ResponsiveLayout.value(
    context,
    Breakpoints(
      xs: textTheme.titleLarge,
      md: textTheme.displaySmall,
      lg: textTheme.displayMedium,
      xl: textTheme.displayLarge,
    ),
  );

  return Scaffold(
    appBar: AppBar(
      title: const Text('Library'),
    ),
    body: SingleChildScrollView(
      padding: const EdgeInsets.all(20),
      child: Align(
        alignment: Alignment.topCenter,
        child: ConstrainedBox(
          constraints: containerMaxWidth,
          child: Column(
            children: [
              Text(
                'Heading',
                style: headlineStyle,
              ),
              gap,
              ResponsiveRow(
                runSpacing: 20.0,
                spacing: 20.0,
                columns: [
                  ResponsiveColumn(cardBreakpoints, child: card1),
                  ResponsiveColumn(cardBreakpoints, child: card2),
                  ResponsiveColumn(cardBreakpoints, child: card3),
                  ResponsiveColumn(cardBreakpoints, child: card4),
                ],
              ),
            ],
          ),
        ),
      ),
    ),
  );
}