import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final theme = ThemeData.from(
      colorScheme: const ColorScheme.light(),
      textTheme: Typography.englishLike2021,
      useMaterial3: true,
    );

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Expected results',
                style: theme.textTheme.titleMedium?.copyWith(
                  color: theme.colorScheme.onInverseSurface,
                ),
                textAlign: TextAlign.center,
              ),
              Text(
                'Height: 48.0\n'
                'Text vertically centered',
                style: theme.textTheme.bodyMedium?.copyWith(
                  color: theme.colorScheme.onInverseSurface,
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 16.0),
              DefaultTabController(
                length: 3,
                child: Container(
                  color: theme.colorScheme.surface,
                  child: ConstrainedBox(
                    constraints: const BoxConstraints(maxHeight: 47.5),
                    child: const TabBar(
                      tabs: [
                        Tab(
                          child: Padding(
                            padding: EdgeInsetsDirectional.only(top: 2.5),
                            child: Text('Tab 1'),
                          ),
                        ),
                        Tab(
                          child: Padding(
                            padding: EdgeInsetsDirectional.only(top: 2.5),
                            child: Text('Tab 2'),
                          ),
                        ),
                        Tab(
                          child: Padding(
                            padding: EdgeInsetsDirectional.only(top: 2.5),
                            child: Text('Tab 3'),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 32.0),
              Text(
                'Actual results',
                style: theme.textTheme.titleMedium?.copyWith(
                  color: theme.colorScheme.onInverseSurface,
                ),
                textAlign: TextAlign.center,
              ),
              Text(
                'Height: 48.67\n'
                'Text not vertically centered',
                style: theme.textTheme.bodyMedium?.copyWith(
                  color: theme.colorScheme.onInverseSurface,
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 16.0),
              DefaultTabController(
                length: 3,
                child: Container(
                  color: theme.colorScheme.surface,
                  child: const TabBar(
                    tabs: [
                      Tab(text: 'Tab 1'),
                      Tab(text: 'Tab 2'),
                      Tab(text: 'Tab 3'),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
        backgroundColor: theme.colorScheme.inverseSurface,
      ),
      theme: theme,
    );
  }
}