The Chicago widget set for Flutter

Related tags

Desktop chicago
Overview

Chicago widget library

The Chicago widget set is a retro 32-bit desktop design language for Flutter. It was discussed in the Building a desktop design language with Flutter session in Google I/O 2021.

Disclaimer

This library is still under very active development. It also relies on very new features of Flutter and is likely to only work against Flutter on the master channel.

Specifically, this library is known to NOT work against Flutter 2.2, as it relies on commits that have not yet made it to the stable channel.

Example

The example directory contains a "kitchen sink" demo of the widgets contained in the package.

Demo screenshot

There's also an interactive demo built for the web available at tvolkert.github.io

Comments
  • List buttons broken in Kitchen Sink demo

    List buttons broken in Kitchen Sink demo

    In the "lists" section, I can't change the Clock to the Anchor under the List Buttons header.

    1. Clock on the down arrow.
    2. See the menu appear.
    3. Click on the Anchor.
    4. Nothing happens.

    Expected behavior: The menu closes and I see the Anchor displayed in the button.

    Actual behavior: The menu remains open. If I click away, the Clock is still selected.

    The same thing happens with the Basic and Color example List Buttons.

    opened by abarth 5
  • TextInput can try to make a child into a parent of itself

    TextInput can try to make a child into a parent of itself

    cace42525049b6c6473a7b579de440be66df0221 introduced the a bug in TextInput that manifests as the following exception:

    Tried to make a child into a parent of itself.
    'package:flutter/src/widgets/focus_manager.dart':
    Failed assertion: line 1041 pos 12: 'child != this'
    
    opened by tvolkert 2
  • Fix painting bug in Tab/TabPane and implement demo

    Fix painting bug in Tab/TabPane and implement demo

    I hope my layout is fine in the example - I've still got to work on figuring that out for myself.

    I also noticed that Ink widgets were present in the implementation of Tab/TabPane without any Material to paint on, so I replaced those with DecoratedBox widgets. There are certainly other solutions to achieve the same effect but this is the most lightweight one that I've found.

    opened by CicadaCinema 1
  • Remove ListViewSelectionController.attach & detach

    Remove ListViewSelectionController.attach & detach

    They served to enforce that the caller can't set the selection to an out-of-bounds index based on an attached list view, but that's notnecessary at all -- the caller just sets selected ranges, and if those ranges are outside the bounds of the actual list content, there's no inherent harm in that; it's the caller's business.

    The only non-assert usage of attach/detach was the selectAll() API method, but that API's not needed either, since the caller knows their data model and can just set the desired range.

    Fixes #14

    opened by tvolkert 1
  • Does not work on current stable release 2.2.0

    Does not work on current stable release 2.2.0

    Hi Todd,

    Awesome talk and what a great library.

    You might want to point out somewhere what the minimum required version of Flutter for this repo is. I did try the current latest stable (2.2.0), but then there were a lot of errors like: ../lib/src/scroll_bar.dart:826:29: Error: Type 'LongPressDownDetails' not found.

    Switching to 2.3.0-1.0.pre solved it for me.

    Regards, Sander

    opened by jsroest 1
  • Rollup is attempting to reuse disposed layers

    Rollup is attempting to reuse disposed layers

    Since https://github.com/flutter/flutter/pull/85798, Rollup is triggering the following assertion:

    ======== Exception caught by rendering library =====================================================
    The following assertion was thrown during paint():
    Attempted to create a handle to an already disposed layer: ClipRectLayer#2aefa(handles: 0, clipRect: Rect.fromLTRB(6.0, 22.0, 699.0, 242.0), clipBehavior: Clip.hardEdge).
    'package:flutter/src/rendering/layer.dart':
    Failed assertion: line 620 pos 7: 'layer?.debugDisposed != true'
    
    
    Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
    In either case, please report this assertion by filing a bug on GitHub:
      https://github.com/flutter/flutter/issues/new?template=2_bug.md
    
    The relevant error-causing widget was: 
      _RevealBox _RevealBox:file:///Users/tvolkert/project/tvolkert/chicago/lib/src/rollup.dart:204:11
    When the exception was thrown, this was the stack: 
    #2      LayerHandle.layer= (package:flutter/src/rendering/layer.dart:620:7)
    #3      ContainerLayer.append (package:flutter/src/rendering/layer.dart:1042:25)
    #4      PaintingContext.appendLayer (package:flutter/src/rendering/object.dart:237:21)
    #5      PaintingContext.pushLayer (package:flutter/src/rendering/object.dart:395:5)
    #6      PaintingContext.pushClipRect (package:flutter/src/rendering/object.dart:454:7)
    #7      _RenderRevealBox.paint (package:chicago/src/rollup.dart:278:30)
    #8      RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2409:7)
    #9      PaintingContext.paintChild (package:flutter/src/rendering/object.dart:189:13)
    #10     RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2794:15)
    #11     RenderFlex.paint (package:flutter/src/rendering/flex.dart:1078:7)
    #12     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2409:7)
    #13     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:189:13)
    #14     RenderBoxPane.paint (package:chicago/src/box_pane.dart:349:17)
    #15     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2409:7)
    #16     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:189:13)
    #17     RenderScrollPane._paintChildren.<anonymous closure> (package:chicago/src/scroll_pane.dart:1769:19)
    #18     ClipContext._clipAndPaint (package:flutter/src/painting/clip.dart:30:12)
    #19     ClipContext.clipRectAndPaint (package:flutter/src/painting/clip.dart:58:5)
    #20     RenderScrollPane._paintChildren (package:chicago/src/scroll_pane.dart:1768:17)
    #21     PaintingContext.pushLayer (package:flutter/src/rendering/object.dart:398:12)
    #22     PaintingContext.pushClipRect (package:flutter/src/rendering/object.dart:454:7)
    #23     RenderScrollPane.paint (package:chicago/src/scroll_pane.dart:1748:13)
    #24     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2409:7)
    #25     PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:141:11)
    #26     PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:100:5)
    #27     PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:979:29)
    #28     RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:455:19)
    #29     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:883:13)
    #30     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:319:5)
    #31     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1143:15)
    #32     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1080:9)
    #33     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:996:5)
    #37     _invoke (dart:ui/hooks.dart:164:10)
    #38     PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:262:5)
    #39     _drawFrame (dart:ui/hooks.dart:127:31)
    (elided 5 frames from class _AssertionError and dart:async)
    The following RenderObject was being processed when the exception was fired: _RenderRevealBox#9f570 relayoutBoundary=up3
    ...  needs compositing
    ...  parentData: offset=Offset(0.0, 16.0); flex=null; fit=null (can use size)
    ...  constraints: BoxConstraints(unconstrained)
    ...  size: Size(693.0, 220.0)
    RenderObject: _RenderRevealBox#9f570 relayoutBoundary=up3
      needs compositing
      parentData: offset=Offset(0.0, 16.0); flex=null; fit=null (can use size)
      constraints: BoxConstraints(unconstrained)
      size: Size(693.0, 220.0)
    ...  child: RenderPadding#1aac6 relayoutBoundary=up4 NEEDS-PAINT
    ...    needs compositing
    ...    parentData: <none> (can use size)
    ...    constraints: BoxConstraints(unconstrained)
    ...    size: Size(693.0, 220.0)
    ...    padding: EdgeInsets(0.0, 4.0, 0.0, 0.0)
    ...    textDirection: ltr
    ...    child: RenderFlex#69cd9 relayoutBoundary=up5 NEEDS-PAINT
    ...      needs compositing
    ...      parentData: offset=Offset(0.0, 4.0) (can use size)
    ...      constraints: BoxConstraints(unconstrained)
    ...      size: Size(693.0, 216.0)
    ...      direction: horizontal
    ...      mainAxisAlignment: start
    ...      mainAxisSize: min
    ...      crossAxisAlignment: center
    ...      textDirection: ltr
    ...      verticalDirection: down
    ...      child 1: RenderConstrainedBox#3eff2 relayoutBoundary=up6
    ...        parentData: offset=Offset(0.0, 108.0); flex=null; fit=null (can use size)
    ...        constraints: BoxConstraints(unconstrained)
    ...        size: Size(7.0, 0.0)
    ...        additionalConstraints: BoxConstraints(w=7.0, 0.0<=h<=Infinity)
    ...      child 2: RenderConstrainedBox#0cbdb relayoutBoundary=up6
    ...        parentData: offset=Offset(7.0, 108.0); flex=null; fit=null (can use size)
    ...        constraints: BoxConstraints(unconstrained)
    ...        size: Size(4.0, 0.0)
    ...        additionalConstraints: BoxConstraints(w=4.0, 0.0<=h<=Infinity)
    ...      child 3: RenderFlex#fc552 relayoutBoundary=up6 NEEDS-PAINT
    ...        needs compositing
    ...        parentData: offset=Offset(11.0, 0.0); flex=null; fit=null (can use size)
    ...        constraints: BoxConstraints(unconstrained)
    ...        size: Size(682.0, 216.0)
    ...        direction: horizontal
    ...        mainAxisAlignment: start
    ...        mainAxisSize: max
    ...        crossAxisAlignment: start
    ...        textDirection: ltr
    ...        verticalDirection: down
    ...        child 1: _RenderBorderLayout#0707b relayoutBoundary=up7 NEEDS-PAINT
    ...          needs compositing
    ...          parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
    ...          constraints: BoxConstraints(unconstrained)
    ...          size: Size(188.0, 180.0)
    ...        child 2: RenderConstrainedBox#49a52 relayoutBoundary=up7
    ...          parentData: offset=Offset(188.0, 0.0); flex=null; fit=null (can use size)
    ...          constraints: BoxConstraints(unconstrained)
    ...          size: Size(4.0, 0.0)
    ...          additionalConstraints: BoxConstraints(w=4.0, 0.0<=h<=Infinity)
    ...        child 3: _RenderBorderLayout#6a2c1 relayoutBoundary=up7
    ...          needs compositing
    ...          parentData: offset=Offset(192.0, 0.0); flex=null; fit=null (can use size)
    ...          constraints: BoxConstraints(unconstrained)
    ...          size: Size(165.0, 130.0)
    ...        child 4: RenderConstrainedBox#49e6f relayoutBoundary=up7
    ...          parentData: offset=Offset(357.0, 0.0); flex=null; fit=null (can use size)
    ...          constraints: BoxConstraints(unconstrained)
    ...          size: Size(4.0, 0.0)
    ...          additionalConstraints: BoxConstraints(w=4.0, 0.0<=h<=Infinity)
    ...        child 5: _RenderBorderLayout#f4143 relayoutBoundary=up7
    ...          needs compositing
    ...          parentData: offset=Offset(361.0, 0.0); flex=null; fit=null (can use size)
    ...          constraints: BoxConstraints(unconstrained)
    ...          size: Size(171.0, 216.0)
    ...        child 6: RenderConstrainedBox#fa98f relayoutBoundary=up7
    ...          parentData: offset=Offset(532.0, 0.0); flex=null; fit=null (can use size)
    ...          constraints: BoxConstraints(unconstrained)
    ...          size: Size(4.0, 0.0)
    ...          additionalConstraints: BoxConstraints(w=4.0, 0.0<=h<=Infinity)
    ...        child 7: _RenderBorderLayout#e2686 relayoutBoundary=up7
    ...          needs compositing
    ...          parentData: offset=Offset(536.0, 0.0); flex=null; fit=null (can use size)
    ...          constraints: BoxConstraints(unconstrained)
    ...          size: Size(146.0, 134.0)
    ====================================================================================================
    

    Observed at 14b1e5ec34524ac527dce1ac4d23db6355487f1c

    opened by tvolkert 0
  • ListViewSelectionController.isItemSelected can't be used if the ListView isn't visible

    ListViewSelectionController.isItemSelected can't be used if the ListView isn't visible

    I have a list of items that can be selected or not. It affects many aspects of the app. There's a ListView that's used to configure that list of items, so I use a ListViewSelectionController as the source of truth. Unfortunately that ListView isn't always on screen, so sometimes it's not attached, and ListViewSelectionController.isItemSelected asserts that it is attached. So I can't use the ListViewSelectionController as the source of truth.

    Side note: it would be great if ListViewSelectionController had an affordance to enumerate the selected items. Currently I have to just loop over the items one by one querying if they're selected, and that seems expensive given how the list is backed.

    opened by Hixie 0
  • ListViewSelectionController is too aggressive about sending notifications

    ListViewSelectionController is too aggressive about sending notifications

    ListViewSelectionController will send notifications any time any of its mutation affordances are invoked, even if the net result does not involve changing anything about the selection.

    opened by Hixie 0
  • ListView doesn't unregister its listener on the controller when it is detached

    ListView doesn't unregister its listener on the controller when it is detached

    Render objects should not subscribe to anything until they are attached, and should unsubscribe from things when they are detached. RenderListView subscribes when the selectionController property is set, and never unsubscribes.

    This means that if you have a ListView that uses a controller, and then you remove it from the rendering, and give the controller to something else, then when the controller changes value, that original ListView will try to dirty itself and throw an exception (because it's disposed and thus should not be mutating itself any more).

    opened by Hixie 0
  • Update for Flutter 3

    Update for Flutter 3

    Hey Todd, I want to use chicago in an upcoming talk about Flutter for Desktop, so I thought I'd update it for Flutter 3.

    Ping me if you have any questions!

    opened by domesticmouse 0
  • ScrollableListView isn't focusable

    ScrollableListView isn't focusable

    If I tab through https://tvolkert.github.io/ I never get to the list boxes.

    In general, tabbing through https://tvolkert.github.io/, I don't get to the check boxes, the link buttons, any of the widgets under "Lists", half of the widgets in the calendar section, up and down arrows down move between radio buttons, and nothing in the Tables section ends up getting focus.

    opened by Hixie 0
Owner
Todd Volkert
Todd Volkert
The Ico pack available as set of Flutter Icons

The Ico pack available as set of Flutter Icons

RAHUL SHARMA 1 May 4, 2022
An open source desktop application for creating set-plans for TV and movie productions

lyghts_desktop An open source (Windows) desktop application for creating set-plans for TV and movie productions. Getting Started This application uses

MindStudio 1 Feb 15, 2022
A simple flutter input widget to add @ mentions functionality to your app

?? Flutter Mentions A simple flutter input widget to add @ mentions functionality to your app Install ?? To use this package, add flutter_mentions as

Fayeed Pawaskar 95 Nov 4, 2022
A Flutter Web Plugin to display Text Widget as Html for SEO purpose

SEO Renderer A flutter plugin (under development) to render text widgets as html elements for SEO purpose. Created specifically for issue https://gith

Sahdeep Singh 103 Nov 21, 2022
Flutter Installer is an installer for Flutter built with Flutter πŸ’™πŸ˜ŽβœŒ

Flutter Installer Flutter Installer is an installer for Flutter built with Flutter ?? ?? ✌ Flutter and the related logo are trademarks of Google LLC.

Yazeed AlKhalaf 406 Dec 27, 2022
A Flutter package that makes it easy to customize and work with your Flutter desktop app window.

bitsdojo_window A Flutter package that makes it easy to customize and work with your Flutter desktop app window on Windows, macOS and Linux. Watch the

Bits Dojo 607 Jan 4, 2023
Flutter plugin for Flutter desktop(macOS/Linux/Windows) to change window size.

desktop_window Flutter plugin for Flutter desktop(macOS/Linux/Windows) to change window size. Usage import 'package:desktop_window/desktop_window.dart

ChunKoo Park 72 Dec 2, 2022
A Flutter package that makes it easy to customize and work with your Flutter desktop app's system tray.

system_tray A Flutter package that that enables support for system tray menu for desktop flutter apps. on Windows, macOS and Linux. Features: - Modify

AnTler 140 Dec 30, 2022
Fluttern is a web app made with Flutter to list Flutter internships/jobs for the community.

Fluttern Fluttern is a web app made with Flutter to list Flutter internships/jobs for the community. It uses Google Sheet as a backend, simplifying th

Aditya Thakur 3 Jan 5, 2022
Flutter on Windows, MacOS and Linux - based on Flutter Embedding, Go and GLFW.

go-flutter - A package that brings Flutter to the desktop Purpose Flutter allows you to build beautiful native apps on iOS and Android from a single c

null 5.5k Jan 6, 2023
A clean front-end plugin to Volumio, the Linux distribution for music playback. Volumio Touch Display Lite is written in Flutter and runs on flutter-pi.

EN | δΈ­ζ–‡ Touch Display Lite plugin for Volumio 3 Feng Zhou, 2021-12 Touch Display Lite is a clean and fast user interface for Volumio 3, the Linux dist

Feng Zhou 5 Jul 26, 2022
Ubuntu-flutter-plugins - A collection of Flutter plugins and packages for Ubuntu applications.

Flutter plugins for Ubuntu A collection of Flutter plugins and packages for Ubuntu applications. ubuntu_localizations - provides localizations for Flu

Canonical 25 Oct 12, 2022
File picker plugin for Flutter, compatible with mobile (iOS & Android), Web, Desktop (Mac, Linux, Windows) platforms with Flutter Go support.

A package that allows you to use the native file explorer to pick single or multiple files, with extensions filtering support.

Miguel Ruivo 987 Jan 6, 2023
Flutter Community Plus Plugins

Flutter Community Plus Plugins Plus plugins PlusPlugins is a set of Flutter plugins that is developed based on existing Flutter plugins with extra fun

Flutter Community 1.1k Jan 5, 2023
Flutter plugin to store data behind biometric authentication (ie. fingerprint)

biometric_storage Encrypted file store, optionally secured by biometric lock for Android, iOS, MacOS and partial support for Linux, Windows and Web. M

AuthPass 125 Dec 28, 2022
🎞 Flutter media playback, broadcast & recording library for Windows, Linux & macOS. Written in C++ using libVLC & libVLC++. (Both audio & video)

dart_vlc Flutter media playback, broadcast, recording & chromecast library for Windows, Linux & macOS. Written in C++ using libVLC & libVLC++. Install

Hitesh Kumar Saini 417 Dec 29, 2022
Flutter plugins used in Mixin

flutter-plugins This repo contains the source code for Flutter plugins which used in Mixin. Check the packages directory for all plugins. Plugins Plug

Mixin Network 246 Jan 3, 2023
Implements Microsoft's Fluent Design System in Flutter.

fluent_ui Design beautiful native windows apps using Flutter Unofficial implementation of Fluent UI for Flutter. It's written based on the official do

Bruno D'Luka 1.8k Dec 30, 2022
Flutter library for window blur & transparency effects for on Windows & Linux. πŸ’™

flutter_acrylic Window blur & transparency effects for Flutter on Windows & Linux Installation Mention in your pubspec.yaml. dependencies: ... flu

Hitesh Kumar Saini 437 Dec 31, 2022