Flutter: Boxconstraints

Show a red screen, file example_constraints.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: ConstrainedBox(
        constraints: const BoxConstraints(
          minWidth: 10,
          minHeight: 20,
          maxWidth: 10,
          maxHeight: 20,
        ),
        child: const ColoredBox(color: Colors.red),
      ),
    ),
  );
}

example_column_row.dart

import 'package:flutter/material.dart';

void main() {
  const textStyle = TextStyle(
    fontSize: 48,
    fontWeight: FontWeight.bold,
    color: Colors.black,
    height: 2,
  );
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: EdgeInsets.all(32.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [

              Text('1', style: textStyle),
              Text('2', style: textStyle),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Text('3', style: textStyle),
                  Text('44', style: textStyle),
                ],
              ),
              Text('5', style: textStyle),
            ],
          ),
        ),
      ),
    ),
  );
}

File example_container_1.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Container(
          constraints: const BoxConstraints(
            minWidth: 400,
            maxWidth: 400,

            minHeight: 400,
            maxHeight: 400,
          ),
          color: Colors.greenAccent,
          child: const Text(
            '\n\n\n\n\nAnh yêu em 🐰',
            style: TextStyle(fontSize: 33, color: Colors.pink),
          ),
        ),
      ),
    ),
  );
}

result

vy_cupertino.dart

import 'package:flutter/cupertino.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 CupertinoApp(home: MyHomePage());
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isChecked = false;
  DateTime selectedDate = DateTime.now();

  void _showDatePicker(BuildContext context) {
    showCupertinoModalPopup(
      context: context,
      builder:
          (context) => SizedBox(
            height: 250,
            child: CupertinoDatePicker(
              mode: CupertinoDatePickerMode.date,
              initialDateTime: selectedDate,
              onDateTimeChanged: (DateTime newDate) {
                setState(() {
                  selectedDate = newDate;
                });
              },
            ),
          ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('Cupertino Widgets'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CupertinoButton(
              color: CupertinoColors.activeBlue,
              child: const Text('Press Me'),
              onPressed: () {},
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CupertinoCheckbox(
                  value: isChecked,
                  onChanged: (bool? value) {
                    setState(() {
                      isChecked = value ?? false;
                    });
                  },
                ),
                const Text('Accept Terms'),
              ],
            ),
            const SizedBox(height: 20),
            CupertinoButton(
              color: CupertinoColors.activeGreen,
              child: const Text('Pick a Date'),
              onPressed: () => _showDatePicker(context),
            ),
            const SizedBox(height: 10),
            Text('Selected Date: ${selectedDate.toLocal()}'.split(' ')[0]),
          ],
        ),
      ),
    );
  }
}

result https://youtube.com/shorts/I25oj6v57cQ?si=aP8cjcQn0lmHqfk0