Master Detail layout

master_detail_container.dart

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

const masterItemTileUnselectedColor = Color(0xFFECEEF0); 
const masterItemTileColor = Color(0xFFFFFFFF);


class MasterDetailContainer extends StatefulWidget {
  final Map<EntryTileData, EntryViewData> viewData;

  const MasterDetailContainer({Key key, this.viewData}) : super(key: key);

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

class _MasterDetailContainerState extends State<MasterDetailContainer> {
  EntryTileData _currentItem;

  @override
  void initState() {
    _currentItem = itemTiles.first;
    super.initState();
  }

  List<EntryTileData> get itemTiles => viewData.keys.toList();

  List<EntryViewData> get itemViews => viewData.values.toList();

  Map<EntryTileData, EntryViewData> get viewData => widget.viewData;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Row(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Flexible(
                  flex: 2,
                  child: Container(
                      color: masterItemTileUnselectedColor,
                      child: _buildItemTileList(
                        itemTiles.toList(),
                      ))),
              Flexible(flex: 4, child: _buildItemView(viewData[_currentItem])),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildItemTileList(List<EntryTileData> keys) {
    return Material(
      elevation: 1,
      color: masterItemTileUnselectedColor,
      child: Stack(
        fit: StackFit.expand,
        children: [
          Container(
            child: ListView(
              children: keys
                  .map(
                    (e) => ListTile(
                      title: Center(
                        child: Text(
                          e.itemName,
                        ),
                      ),
                      tileColor: e == _currentItem
                          ? masterItemTileColor
                          : masterItemTileUnselectedColor,
                      onTap: () {
                        setState(() {
                          _currentItem = e;
                        });
                      },
                    ),
                  )
                  .toList(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildItemView(EntryViewData viewData) {
    var child = viewData?.child;
    if (child == null) return Container();
    return child;
  }
}

// Model for Master pane
class EntryTileData {
  final String itemName;

  EntryTileData(this.itemName);
}

// Model for Detail pane
class EntryViewData {
  final Widget child;

  EntryViewData(this.child);
}