desktopia 0.2.0

A set of desktop widgets and components for Flutter. Includes a configuration manager.

Desktopia

Flutter widgets and components for desktop:

• Configuration manager: config file management
• App zones: a solution for managing the navigation for desktop
• Widgets: utility widgets: menu, header, divider

Components

Config manager

Load and save config files

ConfigManager conf = ConfigManager.auto("my_app")..read();

This will read the config file for the app at ~/.my_app or create it. Get the config data

final Map<String, dynamic> data = conf.data;

Write the config data:

conf.data["my_key"] = "my value";
conf.write(conf.data);

Get a value from a key:

final value = conf.key("my_key");

Navigation: app zones

A solution for managing navigation inside the desktop app. The pages navigation paradigm used on mobile do not work well on desktop. This navigation system defines app zones and update them on demand. App zones are local blocks like sidebar, icons bar, menu bar or main zone.

Create the zones

Define some zones: create a zones directory with the desired zones: ex:

appbar.dart
main.dart
menu.dart
sidebar.dart

Create the widgets for the zones: ex zones/main.dart:

import 'package:flutter/material.dart';

class _MainZoneState extends State<MainZone> {
   @override
    Widget build(BuildContext context) {
       return Container(
          child: const Text("Main zone"),
       );
   }
}

class MainZone extends StatefulWidget {
   @override
   _MainZoneState createState() => _MainZoneState();
}

For a full example check desktop base

Declare the zones

In zones/appzones.dart:

import 'package:desktopia/desktopia.dart';
import 'package:flutter/widgets.dart';

import 'appbar.dart';
import 'main.dart';

const Widget emptyWidget = Text("");

final List<AppZone> appZones = <AppZone>[
   AppZone("main", MainZone()),
   AppZone("sidebar", emptyWidget),
   AppZone("appBar", AppBarZone()),
   AppZone("status", emptyWidget),
];

Initialize the zones

import 'package:desktopia/desktopia.dart';
import 'zones/appzones.dart';

final AppZoneStore zones = AppZoneStore();
zones.init(appZones);

Create the main page

Example of main page:

@override
Widget build(BuildContext context) {
 final zStore = Provider.of<AppZoneStore>(context);
 return Scaffold(
     body: _ready
         ? Container(
             color: Colors.white,
             height: MediaQuery.of(context).size.height,
             width: MediaQuery.of(context).size.width,
             child: Column(
               children: <Widget>[
                 Container(
                     color: const Color(0xffcecece),
                     child: Column(children: <Widget>[
                       MenuBar(MenuBarData(menuItems: <MenuItem>[
                         MenuItem(
                             context: context,
                             title: "About",
                             action: () => aboutDialog(context)),
                         MenuItem(
                             context: context,
                             title: "Quit",
                             action: () => exit(0))
                       ])),
                       Container(
                           height: 1.0,
                           width: MediaQuery.of(context).size.width,
                           color: Colors.grey[400],
                           child: const Text("")),
                       Row(
                         children: <Widget>[
                           Expanded(
                             child: zStore.widgetForZone("appBar"),
                           ),
                         ],
                       ),
                       Container(
                           height: 1.0,
                           width: MediaQuery.of(context).size.width,
                           color: Colors.grey[400],
                           child: const Text("")),
                     ])),
                 Expanded(
                   child: Row(
                       crossAxisAlignment: CrossAxisAlignment.stretch,
                       children: [
                         Expanded(
                             flex: 2,
                             child: SingleChildScrollView(
                                 child: zStore.widgetForZone("sidebar"))),
                         const DesktopVerticalDivider(),
                         Expanded(
                           flex: 8,
                           child: SingleChildScrollView(
                               child: zStore.widgetForZone("main")),
                         ),
                       ]),
                 ),
               ],
             ))
         : const Center(child: CircularProgressIndicator()));
}
}

Update a zone

Provide the name of the zone and a widget:

zones.update("sidebar", MyWidget());

Widgets

Menu bar

A top menu text bar. The main menu bar of an app

MenuBar(MenuBarData(menuItems: <MenuItem>[
   MenuItem(
       context: context,
       title: "About",
       action: () => aboutDialog(context)),
   MenuItem(
       context: context,
       title: "Quit",
       action: () => exit(0))
   ]))

Section header

A vertical listing section header

DesktopSectionHeader(title: "Dart packages", borderTop: false)

Vertical divider

A line dividing vertical sections

DesktopVerticalDivider()