Page Web Flutter

import 'package:flutter/material.dart';
import 'dart:async';

void main() {
  runApp(
    const MaterialApp(
      home: MyWidget(),
    ),
  );
}

class CustomListTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Row(
        children: [
          Icon(Icons.person),
          Text('Profile'),
          Icon(Icons.arrow_right)
        ],
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return RedContainer(
      builder: (_) => Container(
          color: Colors.green,
          child: Column(children: [
            Text('${MediaQuery.of(context).size}',
                style: const TextStyle(fontSize: 40)),
          ])),
    );
  }
}

class RedContainer extends StatelessWidget {
  const RedContainer({Key? key, required this.builder})
      : assert(builder != null),
        super(key: key);
  final WidgetBuilder builder;
  @override
  Widget build(BuildContext context) {
    final mq = MediaQuery.of(context);
    final modalWidth = calculateModalWidth(mq.size);
    final isScreenLarge = mq.size.width > 850;

    return Scaffold(
      body: Row(
        children: [
          if (isScreenLarge)
            Container(
                height: double.infinity,
                width: modalWidth,
                color: Colors.indigo[600],
                child: generateMenu(context)),
          generateMainContent(context, mq.size, isScreenLarge),
        ],
      ),
    );
  }

  double calculateModalWidth(Size screenSize) {
    const minWidth = 200.0;
    const maxWidth = 250.0;

    final proposedWidth = screenSize.width / 4;

    if (proposedWidth > maxWidth) {
      return maxWidth;
    } else if (proposedWidth < minWidth) {
      return minWidth;
    }
    return proposedWidth;
  }

  Widget generatePopupMenu(context) => Container(
        child: Align(
          alignment: Alignment.centerRight,
          child: PopupMenuButton<int>(
            itemBuilder: (context) => const [
              PopupMenuItem(
                value: 1,
                child: Text(
                  "Flutter Open",
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.w700),
                ),
              ),
              PopupMenuItem(
                value: 2,
                child: Text(
                  "Flutter Tutorial",
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.w700),
                ),
              ),
            ],
            icon: const Icon(Icons.more_vert, color: Colors.white),
            offset: const Offset(0, 50),
          ),
        ),
      );

  Widget generateAvatar(context) {
    return Column(
      children: <Widget>[
        UserAccountsDrawerHeader(
            accountName: Text('Usuário Teste 001',
                style: TextStyle(color: Colors.white70, fontSize: 18)),
            accountEmail: Text('*********@gmail.com'),
            currentAccountPicture: GestureDetector(
                child: CircleAvatar(
                    backgroundColor: Colors.indigo[600],
                    child:
                        Icon(Icons.person, size: 38.0, color: Colors.white))),
            decoration: BoxDecoration(color: Colors.indigo[200])),
        // Divider(color: Colors.red[100]),
      ],
    );
  }

  Widget generateMenu(context) {
    return Padding(
        padding: const EdgeInsets.only(left: 15.0, right: 15.0),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Expanded(
                child: ListView(
                  children: <Widget>[
                    SizedBox(height: 10),
                    generateAvatar(context),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.dashboard,
                                size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Dashboard",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                    const SizedBox(height: 10),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.people, size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Clientes",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                    SizedBox(height: 10),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.contact_mail_outlined,
                                size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Fornecedores",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                    SizedBox(height: 10),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.local_bar,
                                size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Produtos",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                    SizedBox(height: 10),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.account_circle_outlined,
                                size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Usuários",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                    SizedBox(height: 10),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.summarize_outlined,
                                size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Orçamentos",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                    SizedBox(height: 10),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.dvr, size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Pedidos",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                    SizedBox(height: 10),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.receipt_long,
                                size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Notas Fiscais",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                    SizedBox(height: 10),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.local_atm,
                                size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Contas a Pagar",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                    SizedBox(height: 10),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.paid_outlined,
                                size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Contas a Receber",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                    SizedBox(height: 10),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.settings,
                                size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Configurações",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                    SizedBox(height: 10),
                    TextButton(
                        onPressed: () {},
                        child: Row(
                          children: const <Widget>[
                            Icon(Icons.meeting_room,
                                size: 23.0, color: Colors.white),
                            SizedBox(width: 10),
                            Text("Sair",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 16))
                          ],
                        )),
                  ],
                ),
              ),
            ],
          ),
        ));
  }

  Widget generateMainContent(
      BuildContext context, Size screenSize, bool isScreenLarge) {
    assert(screenSize != null);
    final modalWidth = isScreenLarge ? calculateModalWidth(screenSize) : 0;

    return Container(
      width: screenSize.width - modalWidth,
      child: Column(children: [
        Container(
          height: 70,
          color: const Color(0xFF272D34), //Colors.red
          child: Row(
            children: [
              generatePopupMenu(context),
              SimpleClock(),
              Text(" - Tribo Flutter ERP ",
                  style: const TextStyle(color: Colors.white70, fontSize: 24)),
              SizedBox(width: 10),
              if (!isScreenLarge)
                Material(
                  color: Colors.transparent,
                  child: Ink(
                    decoration: const ShapeDecoration(
                      color: Colors.blue,
                      shape: CircleBorder(),
                    ),
                    child: IconButton(
                      icon: const Icon(Icons.menu),
                      color: Colors.white,
                      tooltip: 'Menu',
                      onPressed: () {},
                    ),
                  ),
                ),
            ],
          ),
        ),
        Expanded(
          child: builder(context),
        ),
      ]),
    );
  }
}

class SimpleClock extends StatefulWidget {
  @override
  _SimpleClockState createState() => _SimpleClockState();
}

class _SimpleClockState extends State<SimpleClock> {
  late String _timeString;
  @override
  void initState() {
    _timeString =
        "${DateTime.now().hour}:${DateTime.now().minute}:${DateTime.now().second}";
    Timer.periodic(Duration(seconds: 1), (Timer t) => _getCurrentTime());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        _timeString,
        style: TextStyle(color: Colors.white70, fontSize: 24),
      ),
    );
  }

  void _getCurrentTime() {
    setState(() {
      _timeString =
          "${DateTime.now().hour}:${DateTime.now().minute}:${DateTime.now().second}";
    });
  }
}