desktopia 0.2.0

  • Readme
  • Changelog
  • Installing
  • 55

Desktopia #

pub package

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");

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 #

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()

Changelog #

0.2.0 #

  • Add a navigation and state management solution
  • Use strict analysis options
  • Update dependencies

0.1.1 #

Minor fixes

0.1.0 #

Initial

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  desktopia: ^0.2.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:desktopia/desktopia.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
13
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
55
Learn more about scoring.

We analyzed this package on Dec 13, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.1
  • pana: 0.13.1+4
  • Flutter: 1.12.13+hotfix.2

Maintenance suggestions

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and desktopia.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
cupertino_icons ^0.1.2 0.1.3
extra_pedantic ^1.1.1+3 1.1.1+3
flutter 0.0.0
pedantic ^1.7.0 1.9.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test