flutter/examples/flutter_gallery/lib/gallery/example_code.dart
Ian Hickson 2dfdc840b1 Refactor everything to do with images (#4583)
Overview
========

This patch refactors images to achieve the following goals:

* it allows references to unresolved assets to be passed
  around (previously, almost every layer of the system had to know about
  whether an image came from an asset bundle or the network or
  elsewhere, and had to manually interact with the image cache).

* it allows decorations to use the same API for declaring images as the
  widget tree.

It requires some minor changes to call sites that use images, as
discussed below.

Widgets
-------

Change this:

```dart
      child: new AssetImage(
        name: 'my_asset.png',
        ...
      )
```

...to this:

```dart
      child: new Image(
        image: new AssetImage('my_asset.png'),
        ...
      )
```

Decorations
-----------

Change this:

```dart
      child: new DecoratedBox(
        decoration: new BoxDecoration(
          backgroundImage: new BackgroundImage(
            image: DefaultAssetBundle.of(context).loadImage('my_asset.png'),
            ...
          ),
          ...
        ),
        child: ...
      )
```

...to this:

```dart
      child: new DecoratedBox(
        decoration: new BoxDecoration(
          backgroundImage: new BackgroundImage(
            image: new AssetImage('my_asset.png'),
            ...
          ),
          ...
        ),
        child: ...
      )
```

DETAILED CHANGE LOG
===================

The following APIs have been replaced in this patch:

* The `AssetImage` and `NetworkImage` widgets have been split in two,
  with identically-named `ImageProvider` subclasses providing the
  image-loading logic, and a single `Image` widget providing all the
  widget tree logic.

* `ImageResource` is now `ImageStream`. Rather than configuring it with
  a `Future<ImageInfo>`, you complete it with an `ImageStreamCompleter`.

* `ImageCache.load` and `ImageCache.loadProvider` are replaced by
  `ImageCache.putIfAbsent`.

The following APIs have changed in this patch:

* `ImageCache` works in terms of arbitrary keys and caches
  `ImageStreamCompleter` objects using those keys. With the new model,
  you should never need to interact with the cache directly.

* `Decoration` can now be `const`. The state has moved to the
  `BoxPainter` class. Instead of a list of listeners, there's now just a
  single callback and a `dispose()` method on the painter. The callback
  is passed in to the `createBoxPainter()` method. When invoked, you
  should repaint the painter.

The following new APIs are introduced:

* `AssetBundle.loadStructuredData`.

* `SynchronousFuture`, a variant of `Future` that calls the `then`
  callback synchronously. This enables the asynchronous and
  synchronous (in-the-cache) code paths to look identical yet for the
  latter to avoid returning to the event loop mid-paint.

* `ExactAssetImage`, a variant of `AssetImage` that doesn't do anything clever.

* `ImageConfiguration`, a class that describes parameters that configure
  the `AssetImage` resolver.

The following APIs are entirely removed by this patch:

* `AssetBundle.loadImage` is gone. Use an `AssetImage` instead.

* `AssetVendor` is gone. `AssetImage` handles everything `AssetVendor`
  used to handle.

* `RawImageResource` and `AsyncImage` are gone.

The following code-level changes are performed:

* `Image`, which replaces `AsyncImage`, `NetworkImage`, `AssetImage`,
  and `RawResourceImage`, lives in `image.dart`.

* `DecoratedBox` and `Container` live in their own file now,
  `container.dart` (they reference `image.dart`).

DIRECTIONS FOR FUTURE RESEARCH
==============================

* The `ImageConfiguration` fields are mostly aspirational. Right now
  only `devicePixelRatio` and `bundle` are implemented. `locale` isn't
  even plumbed through, it will require work on the localisation logic.

* We should go through and make `BoxDecoration`, `AssetImage`, and
  `NetworkImage` objects `const` where possible.

* This patch makes supporting animated GIFs much easier.

* This patch makes it possible to create an abstract concept of an
  "Icon" that could be either an image or a font-based glyph (using
  `IconData` or similar). (see
  https://github.com/flutter/flutter/issues/4494)

RELATED ISSUES
==============

Fixes https://github.com/flutter/flutter/issues/4500
Fixes https://github.com/flutter/flutter/issues/4495
Obsoletes https://github.com/flutter/flutter/issues/4496
2016-06-16 09:49:48 -07:00

235 lines
4.5 KiB
Dart

// Copyright 2016 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Note: This code is not runnable, it contains code snippets displayed in the
// gallery.
import 'package:flutter/material.dart';
class ButtonsDemo {
void setState(VoidCallback callback) { }
BuildContext context;
void buttons() {
// START buttons_raised
// Create a raised button.
new RaisedButton(
child: new Text('BUTTON TITLE'),
onPressed: () {
// Perform some action
}
);
// Create a disabled button.
// Buttons are disabled when onPressed isn't
// specified or is null.
new RaisedButton(
child: new Text('BUTTON TITLE'),
onPressed: null
);
// END
// START buttons_flat
// Create a flat button.
new FlatButton(
child: new Text('BUTTON TITLE'),
onPressed: () {
// Perform some action
}
);
// Create a disabled button.
// Buttons are disabled when onPressed isn't
// specified or is null.
new FlatButton(
child: new Text('BUTTON TITLE'),
onPressed: null
);
// END
// START buttons_dropdown
// Member variable holding value.
String dropdownValue;
// Drop down button with string values.
new DropDownButton<String>(
value: dropdownValue,
onChanged: (String newValue) {
// null indicates the user didn't select a
// new value.
setState(() {
if (newValue != null)
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map((String value) {
return new DropDownMenuItem<String>(
value: value,
child: new Text(value));
})
.toList()
);
// END
// START buttons_icon
// Member variable holding toggle value.
bool value;
// Toggleable icon button.
new IconButton(
icon: Icons.thumb_up,
onPressed: () {
setState(() => value = !value);
},
color: value ? Theme.of(context).primaryColor : null
);
// END
// START buttons_action
// Floating action button in Scaffold.
new Scaffold(
appBar: new AppBar(
title: new Text('Demo')
),
floatingActionButton: new FloatingActionButton(
child: new Icon(icon: Icons.add),
onPressed: null
)
);
// END
}
}
class SelectionControls {
void setState(VoidCallback callback) { }
void selectionControls() {
// START selectioncontrols_checkbox
// Member variable holding the checkbox's value.
bool checkboxValue = false;
// Create a checkbox.
new Checkbox(
value: checkboxValue,
onChanged: (bool value) {
setState(() {
checkboxValue = value;
}
);
});
// Create a disabled checkbox.
// Checkboxes are disabled when onChanged isn't
// specified or null.
new Checkbox(value: false, onChanged: null);
// END
// START selectioncontrols_radio
// Member variable holding value.
int radioValue = 0;
// Method setting value.
void handleRadioValueChanged(int value) {
setState(() {
radioValue = value;
});
}
// Creates a set of radio buttons.
new Row(
children: <Widget>[
new Radio<int>(
value: 0,
groupValue: radioValue,
onChanged: handleRadioValueChanged
),
new Radio<int>(
value: 1,
groupValue: radioValue,
onChanged: handleRadioValueChanged
),
new Radio<int>(
value: 2,
groupValue: radioValue,
onChanged: handleRadioValueChanged
)
]
);
// Creates a disabled radio button.
new Radio<int>(
value: 0,
groupValue: 0,
onChanged: null
);
// END
// START selectioncontrols_switch
// Member variable holding value.
bool switchValue = false;
// Create a switch.
new Switch(
value: switchValue,
onChanged: (bool value) {
setState(() {
switchValue = value;
}
);
});
// Create a disabled switch.
// Switches are disabled when onChanged isn't
// specified or null.
new Switch(value: false, onChanged: null);
// END
}
}
class GridLists {
void gridlists() {
// START gridlists
// Creates a scrollable grid list with images
// loaded from the web.
new ScrollableGrid(
delegate: new FixedColumnCountGridDelegate(
columnCount: 3,
tileAspectRatio: 1.0,
padding: const EdgeInsets.all(4.0),
columnSpacing: 4.0,
rowSpacing: 4.0
),
children: <String>[
'https://example.com/image-0.jpg',
'https://example.com/image-1.jpg',
'https://example.com/image-2.jpg',
'...',
'https://example.com/image-n.jpg'
].map((String url) {
return new GridTile(
footer: new GridTileBar(
title: new Text(url)
),
child: new Image(
image: new NetworkImage(url),
fit: ImageFit.cover
)
);
})
);
// END
}
}