Flutter responsive scrolling

main.dart

import 'package:flutter/material.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: Scaffold(
        body: ResponsiveImageAndDescription(),
      ),
    );
  }
}

class ResponsiveImageAndDescription extends StatefulWidget {
  const ResponsiveImageAndDescription({super.key});

  @override
  State<ResponsiveImageAndDescription> createState() =>
      _ResponsiveImageAndDescriptionState();
}

class _ResponsiveImageAndDescriptionState
    extends State<ResponsiveImageAndDescription> {
  final _contentKey = GlobalKey(debugLabel: 'content');

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle.merge(
      style: const TextStyle(fontSize: 20.0),
      child: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: constraints.maxHeight,
              ),
              child: IntrinsicHeight(
                child: ChildBuilder(
                  builder: (context, child) {
                    final isPortrait = MediaQuery.orientationOf(context) ==
                        Orientation.portrait;
                    if (isPortrait) {
                      return Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          Align(
                            alignment: Alignment.topLeft,
                            child: Image.network(
                              'https://miro.medium.com/v2/1*gK8YRfgcTa6_WELIBdwe8Q.jpeg',
                              width: constraints.maxWidth,
                            ),
                          ),
                          Expanded(
                            child: KeyedSubtree(
                              key: _contentKey,
                              child: child,
                            ),
                          ),
                        ],
                      );
                    } else {
                      return Row(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          Align(
                            alignment: Alignment.topLeft,
                            child: Image.network(
                              'https://miro.medium.com/v2/1*gK8YRfgcTa6_WELIBdwe8Q.jpeg',
                              height: constraints.maxHeight,
                            ),
                          ),
                          Expanded(
                            child: KeyedSubtree(
                              key: _contentKey,
                              child: child,
                            ),
                          ),
                        ],
                      );
                    }
                  },
                  child: const PageContent(),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

typedef WidgetChildBuilder = Widget Function(
    BuildContext context, Widget child);

@immutable
class ChildBuilder extends StatelessWidget {
  const ChildBuilder({
    super.key,
    required this.builder,
    required this.child,
  });

  final WidgetChildBuilder builder;
  final Widget child;

  @override
  Widget build(BuildContext context) => builder(context, child);
}

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

  final String loremIpsum = 'Co-founder Flutter Study Group on Slack. '
      'Writing code for 20+ years, now at DevAngels, London. '
      'Mainly @flutter, and @android also @golang.. but ❤️ '
      'Flutter. We are passionate about bringing your vision to life, '
      'brilliantly, on all platforms. DevAngels is more than a '
      'dev-team-for-hire: we are here to partner directly with your '
      'business, so that you dont need to make permanent hires for '
      'CTO and software engineering - instead.';

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        vertical: 16.0,
        horizontal: 32.0,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          const Text('Some needed text'),
          Text(loremIpsum),
          const Text('Some more needed text'),
          const CounterText(),
          const Text('more text'),
        ],
      ),
    );
  }
}

class CounterText extends StatefulWidget {
  const CounterText({super.key});

  @override
  State<CounterText> createState() => _CounterTextState();
}

class _CounterTextState extends State<CounterText> {
  int _counter = 1;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => setState(() => _counter++),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 12.0),
        child: Text(
          '$_counter',
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}