og1_ui 0.0.24

OG1 UI Widgets package project.

example/lib/main.dart

import 'package:awesome_icons/awesome_icons.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;
  late List<LanguageModel> supportedLanguages;
  late LanguageModel language;
  late List<CommodityModel> supportedCommodities;
  late CommodityModel commodity;
  late ThemeMode themeMode;

  List<LanguageModel> _languageList() {
    return const <LanguageModel>[
      LanguageModel(1, "🇦🇫", "فارسی", "fa", "IR"),
      LanguageModel(2, "🇺🇸", "English", "en", "US"),
      LanguageModel(3, "🇸🇦", "اَلْعَرَبِيَّةُ‎", "ar", "SA"),
      LanguageModel(4, "🇮🇳", "हिंदी", "hi", "IN"),
    ];
  }

  _onCommodityChange(comm) =>
      comm != null ? setState(() => commodity = comm) : true;

  List<CommodityModel> _commodityList() {
    return const <CommodityModel>[
      CommodityModel(1, "All", FontAwesomeIcons.ribbon, Colors.deepPurple),
      CommodityModel(2, "Water", Icons.water_drop_outlined, Colors.blue),
      CommodityModel(3, "Food", FontAwesomeIcons.pizzaSlice, Colors.deepOrange),
      CommodityModel(4, "Clothing", FontAwesomeIcons.tshirt, Colors.indigo),
      CommodityModel(5, "Housing", Icons.house_outlined, Colors.amber),
    ];
  }

  _onLanguageChange(lang) =>
      lang != null ? setState(() => language = lang) : true;

  @override
  void initState() {
    super.initState();
    supportedLanguages = _languageList();
    supportedCommodities = _commodityList();
    commodity = _commodityList()[0];
    language = _languageList()[2];
    themeMode = ThemeMode.dark;
  }

  @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(
      appBar: Og1AppBar(
        actions: [
          Og1IconLauncher(
            width: 70,
            placeholderText: Text(
              "💸",
              style: TextStyle(
                color: commodity.color,
                fontSize: 20,
              ),
            ),
            url: 'https://www.google.com/',
          ),
          Og1IconLauncher(
            placeholderIcon: Icon(
              Icons.chat,
              color: commodity.color,
            ),
            url: 'https://www.google.com/',
          ),
          Og1CommodityPicker(
            supportedCommodities: supportedCommodities,
            commodity: commodity,
            onCommodityChange: _onCommodityChange,
            displayText: true,
          ),
          Og1ThemeModeSelector(
            themeMode: themeMode,
            height: 25,
            onChanged: ((value) => setState(() => themeMode = value)),
          ),
          Og1LanguagePicker(
            supportedLanguages: supportedLanguages,
            language: language,
            onLanguageChange: _onLanguageChange,
          ),
        ],
      ),
      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 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 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']),
        ),
      ],
    );
  }
}