The Chicago widget set for Flutter

Related tags

Widgets 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
A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Bart T 1 Nov 25, 2021
A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Vansh Goel 12 Sep 22, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023
A widget lib that the widget in this lib can react to flutter ScrollController's offset

Language: English | 中文简体 linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

WenJingRui 8 Oct 16, 2022
Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Eduardo Muñoz 48 Dec 1, 2022
Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Arsam 8 Apr 15, 2022
A Flutter widget that will give a Glitch Animation Effect to it's child widget.

GlitchEffect A Flutter widget that will give a Glitch Animation Effect to it's child widget. Installation Add the latest version of package to your pu

Sameer Singh 6 Nov 25, 2022
Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Anon 18 Dec 16, 2022
A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

MohammadAminZamani.afshar 22 Dec 13, 2022
Flutter Carousel Pro - A Flutter Carousel widget

Carousel Extended A Flutter Carousel widget. Usage As simple as using any flutter Widget. Based on Carousel Pro but extended to be able to navigate be

omid habibi 3 Dec 7, 2020
🟥 A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

?? A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

Andrei Lesnitsky 32 Oct 8, 2022
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | Português Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Remi Rousselet 2.6k Dec 29, 2022
A credit card widget for Flutter application.

A credit card widget for Flutter application.

Simform Solutions 281 Dec 27, 2022
A simple Flutter widget library that helps us to select days in a week.

A simple Flutter widget library that helps us to select days in a week.

Shan Shaji 4 Oct 9, 2022
Flutter debug helper widget with common and custom actions

Flutter debug helper widget with common and custom actions

Stanislav Ilin 43 Dec 7, 2022
A flutter plugin which provides Crop Widget for cropping images.

A flutter plugin which provides Crop Widget for cropping images.

Chooyan 97 Jan 5, 2023
A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier.

Draggable Home A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier! Based on the Scaffold and Sliver. Us

Devs On Flutter 106 Dec 12, 2022
Flutter widget for fetching, caching and refetching asynchronous data.

Flutter library for fetching, caching and invalidating asynchronous data Quick Features Fetch asynchronous data Data invalidation Optimistic response

null 32 Dec 24, 2022
Customizable Flutter widget which syncronize ScrollView with PageView as tabs

scrollable_list_tab_scroller Customizable Flutter widget which syncronize ScrollView with PageView as tabs. Create a custom page view as tabs which sy

Railson Ferreira de Souza 4 Dec 21, 2022