mirror of https://github.com/flutter/samples.git
Added more examples in animations (#341)
parent
bc7a51ea6e
commit
f8e3d391f3
@ -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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue