main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
      theme: ThemeData(
        primaryColor: const Color(0xFF6200EE),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedDestination = 0;
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final textTheme = theme.textTheme;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: Drawer(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(bottom: 20),
                    child: Container( // AVATAR
                      width: 50, height: 50,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        color: Colors.black,
                      ),
                      child: const SizedBox(),
                    ),
                  ),
                  Text('Enrique Marques Junior', style: textTheme.headline6?.copyWith(fontWeight: FontWeight.bold)),
                  const SizedBox(height: 5),
                  const Text('email@company.com', style: TextStyle(color: Colors.grey)),
                ]
              ),
            ),
            const Divider(
              height: 1,
              thickness: 1,
            ),
            Container(
              color: Colors.white,
              child: ListTile(
                title: const Text('Meus Espaços'),
                leading: const Icon(Icons.space_dashboard),
                selected: _selectedDestination == 1,
                onTap: () => selectDestination(1),
              )
            ),
            const Divider(height: 0),
            ExpansionPanelList(
              expansionCallback: (int index, bool isExpanded) {
                 selectDestination(isExpanded ? 0 : 2);
              },
              children: [
                ExpansionPanel(
                  canTapOnHeader: true,
                  headerBuilder: (BuildContext context, bool isExpanded) {
                    return ListTile(
                      leading: const Icon(Icons.settings),
                      title: const Text('Configurações'),
                      selected: _selectedDestination == 2,
                    );
                  },
                  body: Form(
                    key: _formKey,
                    child: Padding(
                      padding: const EdgeInsets.all(10),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          const Text('Seu nome', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 11)),
                          TextFormField(
                            initialValue: 'Enrique Marques Junior',
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return 'Please enter some text';
                              }
                              return null;
                            },
                          ),
                          const SizedBox(height: 5),
                          ElevatedButton(
                            onPressed: () {
                              if (_formKey.currentState!.validate()) {
                                ScaffoldMessenger.of(context).showSnackBar(
                                  const SnackBar(content: Text('Processing Data')),
                                );
                              }
                            },
                            child: const Text('Atualizar'),
                          ),
                        ],
                      ),
                    ),
                  ),
                  isExpanded: _selectedDestination == 2,
                ),
              ]
            ),
            Expanded(
              child: Column(
                children: [
                  const Spacer(),
                  const Divider(
                    height: 1,
                    thickness: 1,
                  ),
                  ListTile(
                    leading: const Icon(Icons.exit_to_app),
                    title: const Text('Sair'),
                    selected: _selectedDestination == 3,
                    onTap: () => selectDestination(3),
                  ),
                ]
              )
            )
          ],
        ),
      ),
      body: GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 20,
        mainAxisSpacing: 20,
        padding: const EdgeInsets.all(20),
        childAspectRatio: 3 / 2,
        children: [
          Container(color: Colors.green),
          Container(color: Colors.blue),
          Container(color: Colors.pinkAccent),
          Container(color: Colors.purpleAccent),
        ],
      ),
    );
  }

  void selectDestination(int index) {
    setState(() {
      _selectedDestination = index;
    });
  }
}