media_query.dart

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:async';

import 'package:flutter/material.dart';

import 'diagram_step.dart';

class MediaQueryDiagram extends StatefulWidget with DiagramMetadata {
  const MediaQueryDiagram({super.key, required this.name});

  @override
  final String name;

  @override
  State<MediaQueryDiagram> createState() => _MediaQueryDiagramState();
}

class _MediaQueryDiagramState extends State<MediaQueryDiagram> {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      key: UniqueKey(),
      constraints: BoxConstraints.tight(const Size(
        500.0,
        300.0,
      )),
      child: Theme(
        data: ThemeData(
          primarySwatch: Colors.blue,
        ),
        child: Material(
          color: const Color(0xFFFFFFFF),
          child: MediaQuery(
            data: const MediaQueryData(),
            child: Center(
              child: Stack(
                alignment: Alignment.topCenter,
                children: <Widget>[
                  Container(
                    width: 350.0,
                    height: 250.0,
                    color: Colors.black,
                  ),
                  Container(
                    width: 342.0,
                    height: 246.0,
                    color: Colors.red,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 130.0),
                    child: Container(
                      width: 342.0,
                      height: 246.0,
                      color: Colors.amber,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 200.0),
                    child: Container(
                      width: 342.0,
                      height: 246.0,
                      color: Colors.white,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(0.0, 170, 240.0, 0.0),
                    child: Container(
                      width: 6.0,
                      height: 80.0,
                      color: Colors.black45,
                    ),
                  ),
                  const Padding(
                    padding: EdgeInsets.fromLTRB(0.0, 260, 240.0, 0.0),
                    child: Text(
                      'viewInsets',
                      style: TextStyle(fontSize: 20.0),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(0.0, 100, 0.0, 0.0),
                    child: Container(
                      width: 6.0,
                      height: 70.0,
                      color: Colors.black45,
                    ),
                  ),
                  const Padding(
                    padding: EdgeInsets.fromLTRB(0.0, 70, 0.0, 0.0),
                    child: Text(
                      'padding',
                      style: TextStyle(fontSize: 20.0),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(240.0, 100.0, 0.0, .0),
                    child: Container(
                      width: 6.0,
                      height: 150.0,
                      color: Colors.black45,
                    ),
                  ),
                  const Padding(
                    padding: EdgeInsets.fromLTRB(240.0, 260.0, 0.0, 0.0),
                    child: Text(
                      'viewPadding',
                      style: TextStyle(fontSize: 20.0),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class MediaQueryDiagramStep extends DiagramStep {
  @override
  final String category = 'widgets';

  @override
  Future<List<MediaQueryDiagram>> get diagrams async =>
      <MediaQueryDiagram>[const MediaQueryDiagram(name: 'media_query')];
}