Y at-il un widget prêt à l'emploi ou où commencer floating action button with speed dial actions en Flutter.Flutter bouton d'action flottante avec dail de vitesse
2
A
Répondre
2
Voici une esquisse de la façon de mettre en œuvre un bouton d'action flottante «numérotation abrégée».
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController _controller;
static const List<IconData> icons = const [ Icons.sms, Icons.mail, Icons.phone ];
@override
void initState() {
_controller = new AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
);
}
Widget build(BuildContext context) {
Color backgroundColor = Theme.of(context).cardColor;
Color foregroundColor = Theme.of(context).accentColor;
return new Scaffold(
appBar: new AppBar(title: new Text('Speed Dial Example')),
floatingActionButton: new Column(
mainAxisSize: MainAxisSize.min,
children: new List.generate(icons.length, (int index) {
Widget child = new Container(
height: 70.0,
width: 56.0,
alignment: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.0,
1.0 - index/icons.length/2.0,
curve: Curves.easeOut
),
),
child: new FloatingActionButton(
backgroundColor: backgroundColor,
mini: true,
child: new Icon(icons[index], color: foregroundColor),
onPressed:() {},
),
),
);
return child;
}).toList()..add(
new FloatingActionButton(
child: new AnimatedBuilder(
animation: _controller,
builder: (BuildContext context, Widget child) {
return new Transform(
transform: new Matrix4.rotationZ(_controller.value * 0.5 * math.PI),
alignment: FractionalOffset.center,
child: new Icon(_controller.isDismissed ? Icons.share : Icons.close),
);
},
),
onPressed:() {
if (_controller.isDismissed) {
_controller.forward();
} else {
_controller.reverse();
}
},
),
),
),
);
}
}
2
Il y a aussi maintenant un package publié pour le faire: https://pub.dartlang.org/packages/flutter_fab_dialer
Parfois, l'émulateur Android ne charge pas les icônes de matériel http://g.recordit.co/NKUvsdfdwO.gif est ce problème connu? –
Vous devez vous assurer que votre pubspec.yaml indique que l'application utilise la conception matérielle. Il y a quelques problèmes connus avec les émulateurs Android, vous pouvez rechercher github pour eux. –
Oui, c'est 'uses-material-design: true', mais il y a toujours des problèmes. –