POC - Change Value

change_value.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(
      title: 'Screen height',
      home: App(),
    );
  }
}

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

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  var count = 4;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // change value based on size and listen changes
      count = MediaQuery.of(context).size.width > 250 ? 5 : 4;
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Change!'),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Screen sizes!',
            textAlign: TextAlign.center,
            style: Theme.of(context).textTheme.headline4,
          ),
          Text(
            '''${MediaQuery.of(context).size.height.toStringAsFixed(0)}'''
            ''' x ${MediaQuery.of(context).size.width.toStringAsFixed(0)}''',
            style: Theme.of(context).textTheme.bodyText1,
          ),
          Container(
            padding: const EdgeInsets.only(top: 24),
            alignment: Alignment.center,
            child: Text(
              'Should change this value\nbased on width',
              textAlign: TextAlign.center,
              style: Theme.of(context).textTheme.bodyText1,
            ),
          ),
          Icon(
            Icons.arrow_downward_rounded,
            size: MediaQuery.of(context).size.height * 0.08,
            color: Theme.of(context).primaryColor,
          ),
          Text(
            '$count',
            style: Theme.of(context).textTheme.headline2,
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(
                builder: (context) => const App(),
              ),
            );
          });
        },
        child: const Icon(Icons.refresh_outlined),
      ),
    );
  }
}