mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 22:09:06 +00:00
Added more examples in animations (#341)
This commit is contained in:
@@ -3,7 +3,6 @@
|
|||||||
// found in the LICENSE file.
|
// found in the LICENSE file.
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
import 'src/basics/01_animated_container.dart';
|
import 'src/basics/01_animated_container.dart';
|
||||||
import 'src/basics/02_page_route_builder.dart';
|
import 'src/basics/02_page_route_builder.dart';
|
||||||
import 'src/basics/03_animation_controller.dart';
|
import 'src/basics/03_animation_controller.dart';
|
||||||
@@ -12,6 +11,8 @@ import 'src/basics/05_animated_builder.dart';
|
|||||||
import 'src/basics/06_custom_tween.dart';
|
import 'src/basics/06_custom_tween.dart';
|
||||||
import 'src/basics/07_tween_sequence.dart';
|
import 'src/basics/07_tween_sequence.dart';
|
||||||
import 'src/basics/08_fade_transition.dart';
|
import 'src/basics/08_fade_transition.dart';
|
||||||
|
import 'src/basics/09_animated_positioned.dart';
|
||||||
|
import 'src/basics/10_animated_switcher.dart';
|
||||||
import 'src/misc/hero_animation.dart';
|
import 'src/misc/hero_animation.dart';
|
||||||
import 'src/misc/animated_list.dart';
|
import 'src/misc/animated_list.dart';
|
||||||
import 'src/misc/card_swipe.dart';
|
import 'src/misc/card_swipe.dart';
|
||||||
@@ -64,6 +65,14 @@ final basicDemos = [
|
|||||||
name: 'Fade Transition',
|
name: 'Fade Transition',
|
||||||
route: FadeTransitionDemo.routeName,
|
route: FadeTransitionDemo.routeName,
|
||||||
builder: (context) => FadeTransitionDemo()),
|
builder: (context) => FadeTransitionDemo()),
|
||||||
|
Demo(
|
||||||
|
name: 'AnimatedPositioned',
|
||||||
|
route: AnimatedPositionedDemo.routeName,
|
||||||
|
builder: (context) => AnimatedPositionedDemo()),
|
||||||
|
Demo(
|
||||||
|
name: 'AnimatedSwitcher',
|
||||||
|
route: AnimatedSwitcherDemo.routeName,
|
||||||
|
builder: (context) => AnimatedSwitcherDemo())
|
||||||
];
|
];
|
||||||
|
|
||||||
final miscDemos = [
|
final miscDemos = [
|
||||||
|
|||||||
79
animations/lib/src/basics/09_animated_positioned.dart
Normal file
79
animations/lib/src/basics/09_animated_positioned.dart
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
// Copyright 2020 The Flutter team. All rights reserved.
|
||||||
|
// Use of this source code is governed by a BSD-style license that can be
|
||||||
|
// found in the LICENSE file.
|
||||||
|
|
||||||
|
import 'dart:math';
|
||||||
|
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class AnimatedPositionedDemo extends StatefulWidget {
|
||||||
|
static String routeName = '/basics/09_animated_positioned';
|
||||||
|
|
||||||
|
_AnimatedPositionedDemoState createState() => _AnimatedPositionedDemoState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _AnimatedPositionedDemoState extends State<AnimatedPositionedDemo> {
|
||||||
|
double topPosition;
|
||||||
|
double leftPosition;
|
||||||
|
|
||||||
|
double generateTopPosition(double top) => Random().nextDouble() * top;
|
||||||
|
|
||||||
|
double generateLeftPosition(double left) => Random().nextDouble() * left;
|
||||||
|
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
topPosition = generateTopPosition(30);
|
||||||
|
leftPosition = generateLeftPosition(30);
|
||||||
|
}
|
||||||
|
|
||||||
|
void changePosition(double top, double left) {
|
||||||
|
setState(() {
|
||||||
|
topPosition = generateTopPosition(top);
|
||||||
|
leftPosition = generateLeftPosition(left);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final size = MediaQuery.of(context).size;
|
||||||
|
final appBar = AppBar();
|
||||||
|
final topPadding = MediaQuery.of(context).padding.top;
|
||||||
|
// AnimatedPositioned animates changes to a widget's position within a Stack
|
||||||
|
return SafeArea(
|
||||||
|
child: Scaffold(
|
||||||
|
appBar: appBar,
|
||||||
|
body: Container(
|
||||||
|
height: size.height,
|
||||||
|
width: size.width,
|
||||||
|
child: Stack(
|
||||||
|
children: [
|
||||||
|
AnimatedPositioned(
|
||||||
|
top: topPosition,
|
||||||
|
left: leftPosition,
|
||||||
|
duration: Duration(seconds: 1),
|
||||||
|
child: InkWell(
|
||||||
|
onTap: () => changePosition(
|
||||||
|
size.height -
|
||||||
|
(appBar.preferredSize.height + topPadding + 50),
|
||||||
|
size.width - 150),
|
||||||
|
child: Container(
|
||||||
|
alignment: Alignment.center,
|
||||||
|
width: 150,
|
||||||
|
height: 50,
|
||||||
|
child: Text(
|
||||||
|
"Click Me",
|
||||||
|
style: TextStyle(
|
||||||
|
color:
|
||||||
|
Theme.of(context).buttonTheme.colorScheme.onPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
color: Theme.of(context).primaryColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
72
animations/lib/src/basics/10_animated_switcher.dart
Normal file
72
animations/lib/src/basics/10_animated_switcher.dart
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
// Copyright 2020 The Flutter team. All rights reserved.
|
||||||
|
// Use of this source code is governed by a BSD-style license that can be
|
||||||
|
// found in the LICENSE file.
|
||||||
|
|
||||||
|
import 'dart:math';
|
||||||
|
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
Color generateColor() => Color(0xFFFFFFFF & Random().nextInt(0xFFFFFFFF));
|
||||||
|
|
||||||
|
Widget generateContainer(int keyCount) => Container(
|
||||||
|
key: ValueKey<int>(keyCount),
|
||||||
|
height: Random().nextDouble() * 200,
|
||||||
|
width: Random().nextDouble() * 200,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: generateColor(),
|
||||||
|
borderRadius: BorderRadius.circular(Random().nextDouble() * 100),
|
||||||
|
border: Border.all(
|
||||||
|
color: generateColor(),
|
||||||
|
width: Random().nextDouble() * 5,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
class AnimatedSwitcherDemo extends StatefulWidget {
|
||||||
|
static String routeName = '/basics/10_animated_switcher';
|
||||||
|
|
||||||
|
_AnimatedSwitcherDemoState createState() => _AnimatedSwitcherDemoState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _AnimatedSwitcherDemoState extends State<AnimatedSwitcherDemo> {
|
||||||
|
Widget container;
|
||||||
|
int keyCount;
|
||||||
|
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
keyCount = 0;
|
||||||
|
container = generateContainer(keyCount);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
appBar: AppBar(
|
||||||
|
actions: [
|
||||||
|
MaterialButton(
|
||||||
|
onPressed: () => setState(
|
||||||
|
() => container = generateContainer(++keyCount),
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
"Change Widget",
|
||||||
|
style: TextStyle(
|
||||||
|
color: Theme.of(context).buttonTheme.colorScheme.onPrimary),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
body: Center(
|
||||||
|
// AnimatedSwitcher Widget is used to switch between different widgets
|
||||||
|
// with a given transition. You can change the transitions by using
|
||||||
|
// transitionBuilder property.
|
||||||
|
child: AnimatedSwitcher(
|
||||||
|
duration: Duration(seconds: 1),
|
||||||
|
child: container,
|
||||||
|
transitionBuilder: (child, animation) => ScaleTransition(
|
||||||
|
child: child,
|
||||||
|
scale: animation,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -6,7 +6,7 @@ import 'package:flutter/material.dart';
|
|||||||
import 'package:flutter/widgets.dart';
|
import 'package:flutter/widgets.dart';
|
||||||
|
|
||||||
class AnimatedListDemo extends StatefulWidget {
|
class AnimatedListDemo extends StatefulWidget {
|
||||||
static String routeName = '/basics/08_animated_list';
|
static String routeName = '/misc/animated_list';
|
||||||
|
|
||||||
_AnimatedListDemoState createState() => _AnimatedListDemoState();
|
_AnimatedListDemoState createState() => _AnimatedListDemoState();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -169,7 +169,7 @@ packages:
|
|||||||
name: test_api
|
name: test_api
|
||||||
url: "https://pub.dartlang.org"
|
url: "https://pub.dartlang.org"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "0.2.11"
|
version: "0.2.15"
|
||||||
typed_data:
|
typed_data:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
|
|||||||
@@ -5,12 +5,11 @@
|
|||||||
// gestures. You can also use WidgetTester to find child widgets in the widget
|
// gestures. You can also use WidgetTester to find child widgets in the widget
|
||||||
// tree, read text, and verify that the values of widget properties are correct.
|
// tree, read text, and verify that the values of widget properties are correct.
|
||||||
|
|
||||||
|
import 'package:animations/main.dart';
|
||||||
import 'package:flutter_test/flutter_test.dart';
|
import 'package:flutter_test/flutter_test.dart';
|
||||||
|
|
||||||
import 'package:animations/main.dart';
|
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
testWidgets('Counter increments smoke test', (tester) async {
|
testWidgets('smoke test', (tester) async {
|
||||||
// Build our app and trigger a frame.
|
// Build our app and trigger a frame.
|
||||||
await tester.pumpWidget(AnimationSamples());
|
await tester.pumpWidget(AnimationSamples());
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user