master-detail-example

master_detail_example.dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<bool> _isOpen = [
    true,
    false,
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            Drawer(
              elevation: 1,
              child: Scaffold(
                appBar: AppBar(
                  title: Text('Data Center'),
                ),
                body: SafeArea(
                  child: Container(
                    child: Column(
                      children: [
                        Expanded(
                          child: SingleChildScrollView(
                            physics: AlwaysScrollableScrollPhysics(),
                            child: ExpansionPanelList(
                              elevation: 0,
                              expansionCallback: (i, isOpen) =>
                                  setState(() => _isOpen[i] = !isOpen),
                              children: [
                                ExpansionPanel(
                                  backgroundColor: Colors.transparent,
                                  isExpanded: _isOpen[0],
                                  headerBuilder: (context, isOpen) => Container(
                                    child: ListTile(
                                      leading: Icon(Icons.mail),
                                      title: Text('Email Address'),
                                      subtitle: Text('12 Exposures'),
                                    ),
                                  ),
                                  body: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      ListTile(
                                        title: Text('Work'),
                                        subtitle: Text('myidcare.m@gmail.com'),
                                        onTap: () {},
                                        selected: true,
                                      ),
                                      ListTile(
                                        title: Text('Home'),
                                        subtitle: Text('email.m@gmail.com'),
                                        onTap: () {},
                                      ),
                                    ],
                                  ),
                                ),
                                ExpansionPanel(
                                  backgroundColor: Colors.transparent,
                                  isExpanded: _isOpen[1],
                                  headerBuilder: (context, isOpen) => Container(
                                    child: ListTile(
                                      leading: Icon(Icons.person),
                                      title: Text('Social Security Number'),
                                      subtitle: Text('No Exposures'),
                                    ),
                                  ),
                                  body: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Center(
                child: MyWidget(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final list = [
      {
        'title': 'Adobe',
        'subtitle':
            'The site Adobe has been reported in October 2013 to possibly have suffered a data breach',
        'date': '6/25/202',
      },
      {
        'title': 'tumblr.com',
        'subtitle':
            'The site tumblr.com has been reported in October 2013 to possibly have suffered a data breach',
        'date': '6/25/202',
      },
      {
        'title': 'Dropbox.com',
        'subtitle':
            'The site Dropbox.com has been reported in October 2013 to possibly have suffered a data breach',
        'date': '6/25/202',
      },
    ];
    return Row(
      children: [
        Drawer(
          elevation: 1,
          child: Scaffold(
            appBar: AppBar(
              title: Text('Work'),
            ),
            body: SafeArea(
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                      right: BorderSide(color: Colors.black.withOpacity(0.05))),
                ),
                child: ListView.separated(
                  itemBuilder: (context, i) => ListTile(
                    title: Text(list[i]['title']!),
                    subtitle: Text(
                      list[i]['subtitle']!,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                    trailing: Text(list[i]['date']!),
                    isThreeLine: true,
                    onTap: () {},
                    selected: i == 0,
                  ),
                  separatorBuilder: (context, i) => Divider(),
                  itemCount: 3,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: MyWidget2(),
        ),
      ],
    );
  }
}

class MyWidget2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adobe'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ListTile(
              title: Text(
                'Email Address',
                style: Theme.of(context).textTheme.bodyText2!.merge(
                      TextStyle(fontSize: 10),
                    ),
              ),
              subtitle: Text(
                'myidcare.m@gmail.com',
                style: Theme.of(context).textTheme.bodyText1,
              ),
            ),
            ListTile(
              title: Text(
                'Type',
                style: Theme.of(context).textTheme.bodyText2!.merge(
                      TextStyle(fontSize: 10),
                    ),
              ),
              subtitle: Text(
                'Breach',
                style: Theme.of(context).textTheme.bodyText1,
              ),
            ),
            ListTile(
              title: Text(
                'Source',
                style: Theme.of(context).textTheme.bodyText2!.merge(
                      TextStyle(fontSize: 10),
                    ),
              ),
              subtitle: Text(
                'Adobe',
                style: Theme.of(context).textTheme.bodyText1,
              ),
            ),
            ListTile(
              title: Text(
                'Discovered',
                style: Theme.of(context).textTheme.bodyText2!.merge(
                      TextStyle(fontSize: 10),
                    ),
              ),
              subtitle: Text(
                '6/25/2020',
                style: Theme.of(context).textTheme.bodyText1,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: TextFormField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Data Breach',
                  disabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.blue),
                  ),
                  labelStyle: TextStyle(color: Colors.blue),
                ),
                maxLines: null,
                enabled: false,
                initialValue:
                    'The site Adobe has been reported in October 2013 to possibly have suffered a data exposure that could include 12345678 password and emails.\n\nWe recommend you log into and change the password to any account',
              ),
            ),
          ],
        ),
      ),
    );
  }
}