og1_ui 0.0.3

OG1 UI Widgets package project.

example/lib/main.dart

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  int currentIndex = 0;
  final _selection = ValueNotifier<dynamic>(null);
  bool displayDetails = false;

  @override
  Widget build(BuildContext context) {
    final List<TabModel> tabModels = [
      const TabModel('News Feed', Icon(Icons.water_damage)),
      const TabModel('Profile', Icon(Icons.account_circle)),
      const TabModel('Map', Icon(Icons.map)),
      const TabModel('Water', Icon(Icons.water_rounded)),
      const TabModel('Donations', Icon(Icons.analytics_rounded)),
      const TabModel('Menu', Icon(Icons.menu)),
    ];

    return MaterialApp(
        home: Og1Layout(
      body: Center(
        child: Og1MasterDetails(
            master: buildMaster(_dummyData(), (value) {
              _selection.value = value;
              displayDetails = value != null;
              setState(() {
                displayDetails = displayDetails;
              });
            }),
            details: buildDetails(_selection),
            displayDetails: displayDetails),
      ),
      currentIndex: currentIndex,
      tabs: tabModels,
      desktopLayout: true,
      onTap: (id) {
        setState(() {
          currentIndex = id;
        });
      },
    ));
  }

  Widget buildMaster(List<dynamic> items, ValueChanged<dynamic> onSelect) {
    return ListView.separated(
      separatorBuilder: (context, index) => const Divider(height: 0),
      itemCount: items.length,
      itemBuilder: (context, index) {
        final _item = items[index];
        return ListTile(
          leading: const Icon(Icons.person),
          title: Text(_item['name']),
          subtitle: Text(_item['email']),
          onTap: () => onSelect(_item),
        );
      },
    );
  }

  Widget buildDetails(ValueNotifier<dynamic> selection) {
    return ValueListenableBuilder<dynamic>(
      valueListenable: selection,
      builder: (context, item, child) {
        if (item == null) {
          return Scaffold(
            appBar: AppBar(),
            body: const Center(child: Text('No Contact Selected')),
          );
        }
        return ContactDetails(contact: item);
      },
    );
  }

  List<dynamic> _dummyData() {
    return [
      {'name': 'John Doe', 'email': '[e-mail]'},
      {'name': 'Susan Smith', 'email': '[e-mail]'},
      {'name': 'James Hatfield', 'email': '[e-mail]'},
      {'name': 'Steve Jobs', 'email': '[e-mail]'},
      {'name': 'Bill Gates', 'email': '[e-mail]'},
      {'name': 'Elon Musk', 'email': '[e-mail]'},
      {'name': 'John Smith', 'email': '[e-mail]'},
    ];
  }
}

class ContactDetails extends StatelessWidget {
  final dynamic contact;

  const ContactDetails({
    Key? key,
    @required this.contact,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Details'),
        centerTitle: false,
      ),
      body: ListView(
        children: [
          ListTile(
            leading: const Icon(Icons.person_outline),
            title: const Text('Name'),
            subtitle: Text(contact['name']),
          ),
          ListTile(
            leading: const Icon(Icons.email),
            title: const Text('Email'),
            subtitle: Text(contact['email']),
          ),
        ],
      ),
    );
  }
}