DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1331 from abarth/more_examples

Browse Source 
Port some more examples to fn3
This commit is contained in:
Adam Barth 2015-09-24 15:57:30 -07:00
commit 66322b2c77
8 changed files with 97 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
examples/widgets/drag_and_drop.dart
View File

@ -5,7 +5,7 @@
import 'dart:sky' as sky;
import 'package:sky/material.dart';
import 'package:sky/widgets.dart';
import 'package:sky/src/fn3.dart';
final double kTop = 10.0 + sky.view.paddingTop;
final double kLeft = 10.0;
@ -17,10 +17,13 @@ class DragData {
}
class ExampleDragTarget extends StatefulComponent {
String _text = 'ready';
ExampleDragTargetState createState() => new ExampleDragTargetState(this);
}
void syncConstructorArguments(ExampleDragTarget source) {
}
class ExampleDragTargetState extends ComponentState<ExampleDragTarget> {
ExampleDragTargetState(ExampleDragTarget config) : super(config);
String _text = 'ready';
void _handleAccept(DragData data) {
setState(() {
@ -28,10 +31,10 @@ class ExampleDragTarget extends StatefulComponent {
});
}
Widget build() {
Widget build(BuildContext context) {
return new DragTarget<DragData>(
onAccept: _handleAccept,
builder: (List<DragData> data, _) {
builder: (BuildContext context, List<DragData> data, _) {
return new Container(
width: 100.0,
height: 100.0,
@ -52,8 +55,8 @@ class ExampleDragTarget extends StatefulComponent {
}
}
class Dot extends Component {
Widget build() {
class Dot extends StatelessComponent {
Widget build(BuildContext context) {
return new Container(
width: 50.0,
height: 50.0,
@ -64,7 +67,13 @@ class Dot extends Component {
}
}
class DragAndDropApp extends App {
class DragAndDropApp extends StatefulComponent {
DragAndDropAppState createState() => new DragAndDropAppState(this);
}
class DragAndDropAppState extends ComponentState<DragAndDropApp> {
DragAndDropAppState(DragAndDropApp config) : super(config);
DragController _dragController;
Offset _displacement = Offset.zero;
@ -99,7 +108,7 @@ class DragAndDropApp extends App {
});
}
Widget build() {
Widget build(BuildContext context) {
List<Widget> layers = <Widget>[
new Row([
new ExampleDragTarget(),

16
examples/widgets/horizontal_scrolling.dart
View File

@ -2,14 +2,14 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:sky/widgets.dart';
import 'package:sky/src/fn3.dart';
class Circle extends Component {
class Circle extends StatelessComponent {
Circle({ this.margin: EdgeDims.zero });
final EdgeDims margin;
Widget build() {
Widget build(BuildContext context) {
return new Container(
width: 50.0,
margin: margin + new EdgeDims.symmetric(horizontal: 2.0),
@ -21,8 +21,8 @@ class Circle extends Component {
}
}
class HorizontalScrollingApp extends App {
Widget build() {
class HorizontalScrollingApp extends StatelessComponent {
Widget build(BuildContext context) {
List<Widget> circles = [
new Circle(margin: new EdgeDims.only(left: 10.0)),
new Circle(),
@ -41,11 +41,7 @@ class HorizontalScrollingApp extends App {
return new Center(
child: new Container(
height: 50.0,
child: new Row([
new Block(circles, scrollDirection: ScrollDirection.horizontal)
],
justifyContent: FlexJustifyContent.end
)
child: new Block(circles, scrollDirection: ScrollDirection.horizontal)
)
);
}

23
examples/widgets/navigation.dart
View File

@ -2,7 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:sky/widgets.dart';
import 'package:sky/src/fn3.dart';
List<Route> routes = [
new Route(
@ -60,21 +60,28 @@ List<Route> routes = [
)
];
class NavigationExampleApp extends App {
NavigationState _navState = new NavigationState(routes);
class NavigationExampleApp extends StatefulComponent {
NavigationExampleAppState createState() => new NavigationExampleAppState(this);
}
class NavigationExampleAppState extends ComponentState<NavigationExampleApp> {
NavigationExampleAppState(NavigationExampleApp config) : super(config);
NavigatorHistory _history = new NavigatorHistory(routes);
void onBack() {
if (_navState.hasPrevious()) {
if (_history.hasPrevious()) {
setState(() {
_navState.pop();
_history.pop();
});
} else {
super.onBack();
// TODO(abarth): Integrate with the system navigator.
// super.onBack();
}
}
Widget build() {
return new Row([new Navigator(_navState)]);
Widget build(BuildContext context) {
return new Row([new Navigator(_history)]);
}
}

38
examples/widgets/pageable_list.dart
View File

@ -4,7 +4,8 @@
import 'package:sky/animation.dart';
import 'package:sky/material.dart';
import 'package:sky/widgets.dart';
import 'package:sky/painting.dart';
import 'package:sky/src/fn3.dart';
class CardModel {
CardModel(this.value, this.size, this.color);
@ -15,17 +16,12 @@ class CardModel {
Key get key => new ObjectKey(this);
}
class PageableListApp extends App {
class PageableListApp extends StatefulComponent {
PageableListAppState createState() => new PageableListAppState(this);
}
static const TextStyle cardLabelStyle =
const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: bold);
List<CardModel> cardModels;
Size pageSize = new Size(200.0, 200.0);
ScrollDirection scrollDirection = ScrollDirection.horizontal;
bool itemsWrap = false;
void initState() {
class PageableListAppState extends ComponentState<PageableListApp> {
PageableListAppState(PageableListApp config) : super(config) {
List<Size> cardSizes = [
[100.0, 300.0], [300.0, 100.0], [200.0, 400.0], [400.0, 400.0], [300.0, 400.0]
]
@ -36,17 +32,23 @@ class PageableListApp extends App {
Color color = Color.lerp(Colors.red[300], Colors.blue[900], i / cardSizes.length);
return new CardModel(i, cardSizes[i], color);
});
super.initState();
}
static const TextStyle cardLabelStyle =
const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: bold);
List<CardModel> cardModels;
Size pageSize = new Size(200.0, 200.0);
ScrollDirection scrollDirection = ScrollDirection.horizontal;
bool itemsWrap = false;
void updatePageSize(Size newSize) {
setState(() {
pageSize = newSize;
});
}
Widget buildCard(CardModel cardModel) {
Widget buildCard(BuildContext context, CardModel cardModel) {
Widget card = new Card(
color: cardModel.color,
child: new Container(
@ -142,7 +144,7 @@ class PageableListApp extends App {
);
}
Widget buildBody() {
Widget buildBody(BuildContext context) {
Widget list = new PageableList<CardModel>(
items: cardModels,
itemsWrap: itemsWrap,
@ -156,12 +158,12 @@ class PageableListApp extends App {
callback: updatePageSize,
child: new Container(
child: list,
decoration: new BoxDecoration(backgroundColor: Theme.of(this).primarySwatch[50])
decoration: new BoxDecoration(backgroundColor: Theme.of(context).primarySwatch[50])
)
);
}
Widget build() {
Widget build(BuildContext context) {
return new IconTheme(
data: const IconThemeData(color: IconThemeColor.white),
child: new Theme(
@ -175,7 +177,7 @@ class PageableListApp extends App {
child: new Scaffold(
drawer: buildDrawer(),
toolbar: buildToolBar(),
body: buildBody()
body: buildBody(context)
)
)
)

20
examples/widgets/piano.dart
View File

@ -7,7 +7,7 @@ import 'package:sky_services/media/media.mojom.dart';
import 'package:sky/material.dart';
import 'package:sky/rendering.dart';
import 'package:sky/services.dart';
import 'package:sky/widgets.dart';
import 'package:sky/src/fn3.dart';
// All of these sounds are marked as public domain at soundbible.
const String chimes = "http://soundbible.com/grab.php?id=2030&type=wav";
@ -38,7 +38,7 @@ class Key {
}
}
class PianoApp extends App {
class PianoApp extends StatelessComponent {
final List<Key> keys = [
new Key(Colors.red[500], chimes),
new Key(Colors.orange[500], chainsaw),
@ -68,19 +68,19 @@ class PianoApp extends App {
// Are we leaking all the player connections?
}
Widget build() {
Widget build(BuildContext context) {
List<Widget> children = [];
for (Key key in keys) {
children.add(
new Listener(
child: new Flexible(
new Flexible(
child: new Listener(
child: new Container(
decoration: new BoxDecoration(backgroundColor: key.color)
)
),
onPointerCancel: (_) => key.up(),
onPointerDown: (_) => key.down(),
onPointerUp: (_) => key.up()
),
onPointerCancel: (_) => key.up(),
onPointerDown: (_) => key.down(),
onPointerUp: (_) => key.up()
)
)
);
}

24
examples/widgets/progress_indicator.dart
View File

@ -4,15 +4,14 @@
import 'package:sky/animation.dart';
import 'package:sky/material.dart';
import 'package:sky/widgets.dart';
import 'package:sky/src/fn3.dart';
class ProgressIndicatorApp extends App {
class ProgressIndicatorApp extends StatefulComponent {
ProgressIndicatorAppState createState() => new ProgressIndicatorAppState(this);
}
ValueAnimation<double> valueAnimation;
Direction valueAnimationDirection = Direction.forward;
void initState() {
super.initState();
class ProgressIndicatorAppState extends ComponentState<ProgressIndicatorApp> {
ProgressIndicatorAppState(ProgressIndicatorApp config) : super(config) {
valueAnimation = new ValueAnimation<double>()
..duration = const Duration(milliseconds: 1500)
..variable = new AnimatedValue<double>(
@ -29,6 +28,9 @@ class ProgressIndicatorApp extends App {
valueAnimation.play(valueAnimationDirection);
}
ValueAnimation<double> valueAnimation;
Direction valueAnimationDirection = Direction.forward;
void handleTap() {
setState(() {
// valueAnimation.isAnimating is part of our build state
@ -46,7 +48,7 @@ class ProgressIndicatorApp extends App {
valueAnimation.play(valueAnimationDirection);
}
Widget buildIndicators() {
Widget buildIndicators(BuildContext context) {
List<Widget> indicators = <Widget>[
new SizedBox(
width: 200.0,
@ -76,12 +78,12 @@ class ProgressIndicatorApp extends App {
);
}
Widget build() {
Widget build(BuildContext context) {
Widget body = new GestureDetector(
onTap: handleTap,
child: new Container(
padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0),
decoration: new BoxDecoration(backgroundColor: Theme.of(this).cardColor),
decoration: new BoxDecoration(backgroundColor: Theme.of(context).cardColor),
child: new BuilderTransition(
variables: [valueAnimation.variable],
performance: valueAnimation.view,
@ -103,7 +105,7 @@ class ProgressIndicatorApp extends App {
child: new Scaffold(
toolbar: new ToolBar(center: new Text('Progress Indicators')),
body: new DefaultTextStyle(
style: Theme.of(this).text.title,
style: Theme.of(context).text.title,
child: body
)
)

19
examples/widgets/scale.dart
View File

@ -4,9 +4,17 @@
import 'package:sky/material.dart';
import 'package:sky/rendering.dart';
import 'package:sky/widgets.dart';
import 'package:sky/src/fn3.dart';
class ScaleApp extends App {
class ScaleApp extends StatefulComponent {
ScaleAppState createState() => new ScaleAppState(this);
}
class ScaleAppState extends ComponentState<ScaleApp> {
ScaleAppState(ScaleApp config) : super(config) {
_offset = Offset.zero;
_zoom = 1.0;
}
Point _startingFocalPoint;
@ -16,11 +24,6 @@ class ScaleApp extends App {
double _previousZoom;
double _zoom;
void initState() {
_offset = Offset.zero;
_zoom = 1.0;
}
void _handleScaleStart(Point focalPoint) {
setState(() {
_startingFocalPoint = focalPoint;
@ -48,7 +51,7 @@ class ScaleApp extends App {
canvas.drawCircle(center, radius, paint);
}
Widget build() {
Widget build(BuildContext context) {
return new Theme(
data: new ThemeData.dark(),
child: new Scaffold(

4
sky/packages/sky/lib/src/fn3/gesture_detector.dart
View File

@ -55,7 +55,9 @@ class GestureDetector extends StatefulComponent {
}
class GestureDetectorState extends ComponentState<GestureDetector> {
GestureDetectorState(GestureDetector config) : super(config);
GestureDetectorState(GestureDetector config) : super(config) {
didUpdateConfig(null);
}
final PointerRouter _router = SkyBinding.instance.pointerRouter;