afficher/masquer les widgets sur Flutter par programmation
Sur Android, chaque sous-classe View a une méthode "setVisibility" qui vous permet de modifier la visibilité d'un objet View.
Il y a 3 options pour définir la visibilité:
- visibile: Rend la vue visible à l'intérieur de la mise en page
- invisible: masque la vue, mais laisse un espace équivalent à ce que la vue occuperait si elle était visible
- gone: masque la vue et la supprime entièrement de la mise en page. C'est comme si sa hauteur et sa largeur étaient de 0dp
Existe-t-il un équivalent de ce qui précède pour les widgets dans Flutter?
Pour une référence rapide: https://developer.Android.com/reference/Android/view/View.html#attr_Android:visibility
Vous pouvez utiliser Opacity avec un opacity: de 0.0 pour dessiner un élément masqué tout en occupant de l'espace.
Pour qu’il n’occupe pas d’espace, remplacez-le par une Container() vide.
EDIT: Pour l’envelopper dans un objet Opacity, procédez comme suit:
new Opacity(opacity: 0.0, child: new Padding(
padding: const EdgeInsets.only(
left: 16.0,
),
child: new Icon(pencil, color: CupertinoColors.activeBlue),
))
Didacticiel rapide de Google Developers sur l'opacité: https://youtu.be/9hltevOHQBB
Collaborer à la question et montrer un exemple de remplacement par un Container() vide.
Voici l'exemple ci-dessous:
import "package:flutter/material.Dart";
void main() {
runApp(new ControlleApp());
}
class ControlleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "My App",
home: new HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
bool visibilityTag = false;
bool visibilityObs = false;
void _changed(bool visibility, String field) {
setState(() {
if (field == "tag"){
visibilityTag = visibility;
}
if (field == "obs"){
visibilityObs = visibility;
}
});
}
@override
Widget build(BuildContext context){
return new Scaffold(
appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
body: new ListView(
children: <Widget>[
new Container(
margin: new EdgeInsets.all(20.0),
child: new FlutterLogo(size: 100.0, colors: Colors.blue),
),
new Container(
margin: new EdgeInsets.only(left: 16.0, right: 16.0),
child: new Column(
children: <Widget>[
visibilityObs ? new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Expanded(
flex: 11,
child: new TextField(
maxLines: 1,
style: Theme.of(context).textTheme.title,
decoration: new InputDecoration(
labelText: "Observation",
isDense: true
),
),
),
new Expanded(
flex: 1,
child: new IconButton(
color: Colors.grey[400],
icon: const Icon(Icons.cancel, size: 22.0,),
onPressed: () {
_changed(false, "obs");
},
),
),
],
) : new Container(),
visibilityTag ? new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Expanded(
flex: 11,
child: new TextField(
maxLines: 1,
style: Theme.of(context).textTheme.title,
decoration: new InputDecoration(
labelText: "Tags",
isDense: true
),
),
),
new Expanded(
flex: 1,
child: new IconButton(
color: Colors.grey[400],
icon: const Icon(Icons.cancel, size: 22.0,),
onPressed: () {
_changed(false, "tag");
},
),
),
],
) : new Container(),
],
)
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new InkWell(
onTap: () {
visibilityObs ? null : _changed(true, "obs");
},
child: new Container(
margin: new EdgeInsets.only(top: 16.0),
child: new Column(
children: <Widget>[
new Icon(Icons.comment, color: visibilityObs ? Colors.grey[400] : Colors.grey[600]),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(
"Observation",
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: visibilityObs ? Colors.grey[400] : Colors.grey[600],
),
),
),
],
),
)
),
new SizedBox(width: 24.0),
new InkWell(
onTap: () {
visibilityTag ? null : _changed(true, "tag");
},
child: new Container(
margin: new EdgeInsets.only(top: 16.0),
child: new Column(
children: <Widget>[
new Icon(Icons.local_offer, color: visibilityTag ? Colors.grey[400] : Colors.grey[600]),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(
"Tags",
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: visibilityTag ? Colors.grey[400] : Colors.grey[600],
),
),
),
],
),
)
),
],
)
],
)
);
}
}
Invisible: le widget occupe de l'espace physique sur l'écran mais n'est pas visible pour l'utilisateur.
Gone: le widget ne prend aucun espace physique et est complètement parti.
Mettre à jour
Flutter a ajouté un nouveau widget appelé Visibility
Exemple invisible
Visibility(
child: Container(color: Colors.blue, width: 100, height: 100),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: false,
),
Exemple
Visibility(
child: Container(color: Colors.blue, width: 100, height: 100),
visible: false,
),
Ancienne solution
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("My app"),),
body: HomePage(),
),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
double opacity = 1.0;
bool visible = true;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(child: Opacity(opacity: opacity, child: Container(color: Colors.orange, height: 40.0,),),),
visible ? Expanded(child: Container(color: Colors.green, height: 40.0,),) : Container(),
],
),
Row(
children: <Widget>[
Expanded(child: RaisedButton(child: Text("Invisible"), onPressed: _hide,),),
Expanded(child: RaisedButton(child: Text("Gone"), onPressed: _gone,),)
],
),
],
);
}
void _hide() {
setState(() => opacity = opacity == 0.0 ? 1.0 : 0.0);
}
void _gone() {
setState(() => visible = !visible);
}
}
Flutter contient maintenant un Widget de visibilité que vous devez utiliser pour afficher/masquer les widgets. Le widget peut également être utilisé pour basculer entre 2 widgets en changeant le remplacement.
Ce widget peut atteindre tous les états visibles, invisibles, disparus et bien plus encore.
Visibility(
visible: true //Default is true,
child: Text('Ndini uya uya'),
//maintainSize: bool. When true this is equivalent to invisible;
//replacement: Widget. Defaults to Sizedbox.shrink, 0x0
),
Faites un widget vous-même.
afficher/masquer
class ConditionallyShowContainer extends StatelessWidget {
final Widget child;
final bool show;
ConditionallyShowContainer({this.child, this.show});
@override
Widget build(BuildContext context) {
return Opacity(opacity: this.show ? 1.0 : 0.0, child: this.child);
}
}
afficher/supprimer
class ConditionallyRenderContainer extends StatelessWidget {
final Widget child;
final bool show;
ConditionallyRenderContainer({this.child, this.show});
@override
Widget build(BuildContext context) {
return this.show ? this.child : Container();
}
}
Au fait, y a-t-il un meilleur nom pour les widgets ci-dessus?
Pour les débutants, essayez aussi.
class Visibility extends StatefulWidget {
@override
_VisibilityState createState() => _VisibilityState();
}
class _VisibilityState extends State<Visibility> {
bool a = true;
String mText = "Press to hide";
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "Visibility",
home: new Scaffold(
body: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new RaisedButton(
onPressed: _visibilitymethod, child: new Text(mText),),
a == true ? new Container(
width: 300.0,
height: 300.0,
color: Colors.red,
) : new Container(),
],
)
),
);
}
void _visibilitymethod() {
setState(() {
if (a) {
a = false;
mText = "Press to show";
} else {
a = true;
mText = "Press to hide";
}
});
}
}