J'ai suivi quelques tutoriels sur la création d'un bouton d'action flottant sur mesure et je l'ai recréé avec succès et personnalisé à mon goût. Mais je ressens une question débutante, alors que je ne peux pas comprendre comment / où commencer à construire le corps du contenu principal.
Pour être plus précis, je souhaite construire une alimentation vidéo (comme un style instagram / youtube), mais avoir le Fab (bouton d'action flottante) comme menu qui sera disponible sur ce sujet et quelques autres écrans. P>
Veuillez trouver mon code actuel ci-dessous pour le bouton d'action personnalisé et l'animation. Merci pour votre temps. P> import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'constants.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Mandaboo',
theme: ThemeData(
),
home: MyHomePage(
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
AnimationController animationController;
Animation degOneTranslationAnimation,degTwoTranslationAnimation,degThreeTranslationAnimation, degFourTranslationAnimation;
Animation rotationAnimation;
double getRadiansFromDegree(double degree) {
double unitRadian = 57.295779513;
return degree / unitRadian;
}
@override
void initState() {
animationController = AnimationController(vsync: this,duration: Duration(milliseconds: 250));
degOneTranslationAnimation = TweenSequence([
TweenSequenceItem<double>(tween: Tween<double >(begin: 0.0,end: 1.2), weight: 75.0),
TweenSequenceItem<double>(tween: Tween<double>(begin: 1.2,end: 1.0), weight: 25.0),
]).animate(animationController);
degTwoTranslationAnimation = TweenSequence([
TweenSequenceItem<double>(tween: Tween<double >(begin: 0.0,end: 1.4), weight: 55.0),
TweenSequenceItem<double>(tween: Tween<double>(begin: 1.4,end: 1.0), weight: 45.0),
]).animate(animationController);
degThreeTranslationAnimation = TweenSequence([
TweenSequenceItem<double>(tween: Tween<double >(begin: 0.0,end: 1.75), weight: 35.0),
TweenSequenceItem<double>(tween: Tween<double>(begin: 1.75,end: 1.0), weight: 65.0),
]).animate(animationController);
degFourTranslationAnimation = TweenSequence([
TweenSequenceItem<double>(tween: Tween<double >(begin: 0.0,end: 2.10), weight: 15.0),
TweenSequenceItem<double>(tween: Tween<double>(begin: 2.10,end: 1.0), weight: 85.0),
]).animate(animationController);
rotationAnimation = Tween<double>(begin: 180.0,end: 0.0).animate(CurvedAnimation(parent: animationController
, curve: Curves.easeOut));
super.initState();
animationController.addListener((){
setState(() {
});
});
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
child: Scaffold(
body: Container(
width: size.width,
height: size.height,
child: Stack(
children: <Widget>[
Positioned(
right: 30,
bottom: 30,
child: Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
IgnorePointer(
child: Container(
color: Colors.white.withOpacity(0.0), // comment or change to transparent color
height: 150.0,
width: 150.0,
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(270),degOneTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value))..scale(degOneTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.red,
width: 40,
height: 40,
icon: Icon(
Icons.add,
color: Colors.white,
),
onClick: (){
print('First Button');
},
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(240),degTwoTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value))..scale(degTwoTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.black54,
width: 40,
height: 40,
icon: Icon(
Icons.shop_two,
color: Colors.white,
),
onClick: (){
print('Second button');
},
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(210),degThreeTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value))..scale(degThreeTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.black54,
width: 40,
height: 40,
icon: Icon(
Icons.equalizer,
color: Colors.white,
),
onClick: (){
print('Third Button');
},
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(180),degFourTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value))..scale(degFourTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.black54,
width: 40,
height: 40,
icon: Icon(
Icons.settings,
color: Colors.white,
),
onClick: (){
print('Fourth Button');
},
),
),
),
Transform(
transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value)),
alignment: Alignment.center,
child: CircularButton(
color: Colors.red,
width: 60,
height: 60,
icon: Icon(
Icons.menu,
color: Colors.white,
),
onClick: (){
if (animationController.isCompleted) {
animationController.reverse();
} else {
animationController.forward();
}
},
),
)
],
))
],
),
),
),
);
}
}
class CircularButton extends StatelessWidget {
final double width;
final double height;
final Color color;
final Icon icon;
final Function onClick;
CircularButton({this.color, this.width, this.height, this.icon, this.onClick});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: color,shape: BoxShape.circle),
width: width,
height: height,
child: IconButton(icon: icon,enableFeedback: true, onPressed: onClick),
);
}
}
3 Réponses :
En supposant que ceci est votre arborescence de widget 
Pour créer un corps de contenu principal, passez par Codelabs à flotteur
Certains pointeurs
puis pour ajouter un bouton de flottating personnalisé Tout ce que vous avez à faire est
Hey merci pour la réponse, ce code n'utilise pas réellement le widget de bouton d'action flottante. Je suis donc perdu dans une mer de confusion.
Parcourez les Codelabs en réponse, puis mettez à jour votre question comme il n'est pas clair
Vous pouvez copier Coller Run Code complet ci-dessous démo de travail p> Code complet p>
Vous pouvez déplacer votre bouton Personnalisé Floating Action CODE> vers FloatingAckButton Code> de Echafaud CODE> et mettez votre contenu principal dans Corps Code>
p> import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Mandaboo',
theme: ThemeData(),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
AnimationController animationController;
Animation degOneTranslationAnimation,
degTwoTranslationAnimation,
degThreeTranslationAnimation,
degFourTranslationAnimation;
Animation rotationAnimation;
double getRadiansFromDegree(double degree) {
double unitRadian = 57.295779513;
return degree / unitRadian;
}
@override
void initState() {
animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 250));
degOneTranslationAnimation = TweenSequence([
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 1.2), weight: 75.0),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 1.2, end: 1.0), weight: 25.0),
]).animate(animationController);
degTwoTranslationAnimation = TweenSequence([
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 1.4), weight: 55.0),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 1.4, end: 1.0), weight: 45.0),
]).animate(animationController);
degThreeTranslationAnimation = TweenSequence([
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 1.75), weight: 35.0),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 1.75, end: 1.0), weight: 65.0),
]).animate(animationController);
degFourTranslationAnimation = TweenSequence([
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 2.10), weight: 15.0),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 2.10, end: 1.0), weight: 85.0),
]).animate(animationController);
rotationAnimation = Tween<double>(begin: 180.0, end: 0.0).animate(
CurvedAnimation(parent: animationController, curve: Curves.easeOut));
super.initState();
animationController.addListener(() {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: const Text('Test page'),
),
body: ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: 50,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
color: Colors.blue,
child: Center(child: Text('Entry ${index}')),
);
},
separatorBuilder: (BuildContext context, int index) => const Divider(),
),
floatingActionButton: Stack(
children: <Widget>[
Positioned(
right: 30,
bottom: 30,
child: Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
IgnorePointer(
child: Container(
color: Colors.white.withOpacity(
0.0), // comment or change to transparent color
height: 150.0,
width: 150.0,
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(270),
degOneTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degOneTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.red,
width: 40,
height: 40,
icon: Icon(
Icons.add,
color: Colors.white,
),
onClick: () {
print('First Button');
},
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(240),
degTwoTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degTwoTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.black54,
width: 40,
height: 40,
icon: Icon(
Icons.shop_two,
color: Colors.white,
),
onClick: () {
print('Second button');
},
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(210),
degThreeTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degThreeTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.black54,
width: 40,
height: 40,
icon: Icon(
Icons.equalizer,
color: Colors.white,
),
onClick: () {
print('Third Button');
},
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(180),
degFourTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degFourTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.black54,
width: 40,
height: 40,
icon: Icon(
Icons.settings,
color: Colors.white,
),
onClick: () {
print('Fourth Button');
},
),
),
),
Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value)),
alignment: Alignment.center,
child: CircularButton(
color: Colors.red,
width: 60,
height: 60,
icon: Icon(
Icons.menu,
color: Colors.white,
),
onClick: () {
if (animationController.isCompleted) {
animationController.reverse();
} else {
animationController.forward();
}
},
),
)
],
))
],
),
);
}
}
class CircularButton extends StatelessWidget {
final double width;
final double height;
final Color color;
final Icon icon;
final Function onClick;
CircularButton(
{this.color, this.width, this.height, this.icon, this.onClick});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
width: width,
height: height,
child: IconButton(icon: icon, enableFeedback: true, onPressed: onClick),
);
}
}
La liste affiche la liste Le meilleur widget à utiliser pour afficher des vidéos étant tirées de la base de pompiers?
Le contenu n'a pas été visible car vous utilisiez Scanfold pour votre Fab
Essayez ceci, le contenu est visible
Bien sûr! Niteesh, vous êtes une star absolue. Merci beaucoup! Que je suis bête.
@nerdmonkey content d'aider. Vous pouvez cocher la réponse si elle résolvait votre requête
Je n'ai pas eu votre question. Demandez-vous où placer le code de bouton d'action flottant sur mesure ci-dessus?
Bonjour, merci d'avoir répondu. J'ai besoin de savoir où mettre ce bloc de code oui. J'ai essayé de mettre un widget de conteneur et du widget central / texte, etc. ci-dessus et ci-dessus ce bloc de code, mais rien ne se présente dans l'espace d'arrière-plan blanc.
Gardez le code dans un widget apatride ou standard et transmettez le widget en tant qu'attribut flottantbutton de l'échafaudage
Qu'est-ce que cela signifie par rien ne se présente? Est-ce que votre bouton d'action flottante n'est pas visible?
Merci beaucoup pour votre aide jusqu'à présent! :) C'est l'inverse en fait. Le bouton Action est parfait, il est là et les animations, etc. fonctionnent bien. Mon problème est que je ne peux pas comprendre comment mettre le contenu derrière cela. Ainsi, Fab n'a pas de problèmes. J'ai juste besoin de savoir où / quelle ligne / comment commencer à construire mon contenu principal (le contenu que Fab flotte devant)?