Flutter - Float Action Button - Hiding the visibility of items

Question

I'm trying to control the visibility of the smaller items of the FAB, according to the gif below:

However I am not able to insert the opacity in the items. Anywhere I put some kind of error occurs. I do not know if opacity is the best way to do it.

To hide the items I believe that with animation it is possible to control the time in which they will appear.

Below is what I have achieved so far:

Could you help me solve this problem?

Below is the above gif code:

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new HomePage()));
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> with TickerProviderStateMixin {
  int _angle = 90;
  bool _isRotated = true;

  void _rotate(){
    setState((){
      if(_isRotated) {
        _angle = 45;
        _isRotated = false;
      } else {
        _angle = 90;
        _isRotated = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
            new Positioned(
              bottom: 200.0,
              right: 24.0,
              child: new Container(
                child: new Row(
                  children: <Widget>[
                    new Container(
                      margin: new EdgeInsets.only(right: 16.0),
                      child: new Text(
                        'foo1',
                        style: new TextStyle(
                          fontSize: 13.0,
                          fontFamily: 'Roboto',
                          color: new Color(0xFF9E9E9E),
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    new Material(
                      color: new Color(0xFF9E9E9E),
                      type: MaterialType.circle,
                      elevation: 6.0,
                      child: new GestureDetector(
                        child: new Container(
                          width: 40.0,
                          height: 40.0,
                          child: new InkWell(
                            onTap: (){},
                            child: new Center(
                              child: new Icon(
                                Icons.add,
                                color: new Color(0xFFFFFFFF),
                              ),                      
                            ),
                          )
                        ),
                      )
                    ),
                  ],
                ),
              )
            ),

          new Positioned(
            bottom: 144.0,
            right: 24.0,
            child: new Container(
              child: new Row(
                children: <Widget>[
                  new Container(
                    margin: new EdgeInsets.only(right: 16.0),
                    child: new Text(
                      'foo2',
                      style: new TextStyle(
                        fontSize: 13.0,
                        fontFamily: 'Roboto',
                        color: new Color(0xFF9E9E9E),
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  new Material(
                    color: new Color(0xFF00BFA5),
                    type: MaterialType.circle,
                    elevation: 6.0,
                    child: new GestureDetector(
                      child: new Container(
                        width: 40.0,
                        height: 40.0,
                        child: new InkWell(
                          onTap: (){},
                          child: new Center(
                            child: new Icon(
                              Icons.add,
                              color: new Color(0xFFFFFFFF),
                            ),                      
                          ),
                        )
                      ),
                    )
                  ),
                ],
              ),
            )
          ),
          new Positioned(
            bottom: 88.0,
            right: 24.0,
            child: new Container(
              child: new Row(
                children: <Widget>[
                  new Container(
                    margin: new EdgeInsets.only(right: 16.0),
                    child: new Text(
                      'foo3',
                      style: new TextStyle(
                        fontSize: 13.0,
                        fontFamily: 'Roboto',
                        color: new Color(0xFF9E9E9E),
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  new Material(
                    color: new Color(0xFFE57373),
                    type: MaterialType.circle,
                    elevation: 6.0,
                    child: new GestureDetector(
                      child: new Container(
                        width: 40.0,
                        height: 40.0,
                        child: new InkWell(
                          onTap: (){},
                          child: new Center(
                            child: new Icon(
                              Icons.add,
                              color: new Color(0xFFFFFFFF),
                            ),                      
                          ),
                        )
                      ),
                    )
                  ),
                ],
              ),
            )
          ),
          new Positioned(
            bottom: 16.0,
            right: 16.0,
            child: new Material(
              color: new Color(0xFFE57373),
              type: MaterialType.circle,
              elevation: 6.0,
              child: new GestureDetector(
                child: new Container(
                  width: 56.0,
                  height: 56.00,
                  child: new InkWell(
                    onTap: _rotate,
                    child: new Center(
                      child: new RotationTransition(
                        turns: new AlwaysStoppedAnimation(_angle / 360),
                        child: new Icon(
                          Icons.add,
                          color: new Color(0xFFFFFFFF),
                        ),
                      )
                    ),
                  )
                ),
              )
            ),
          ),
        ]
      )
    );
  }
}

Is the animated Gif you pasted the expected/desired behavior? What in your code you think should lead from the view with foo1/foo2/foo3 to the other view ? (The animated Gif and your code are different language so it's hard to follow and guess what you are trying to do). Please clarify; a more barebone example would help. — mzimmermann, Aug 07 '17 at 04:46
The final goal is gif, but what I would need in the first place is to leave `foo1` hidden so that after the tap it appears. So far I have not found anything to help me control the visuality of widget with Flutter — rafaelcb21, Aug 07 '17 at 05:53
Not sure this helps, in your final goal, but: you could tie the tap to setState, and then build() will be called again, this time skipping (not adding) the foo1 (basically the presence of foo1 would be based on a condition). If you need foo1 keep it's space, replace it with an empty container of the same size on the condition (but get the same size would be generally a pain I think). — mzimmermann, Aug 07 '17 at 16:24
this questions has been ask before but I do not know how to solve your animation issue https://stackoverflow.com/questions/44489804/show-hide-widgets-on-flutter-programmatically you can wrap containers in opacity class and add an pick using _rotated as a variable. If i figure out your animations, I would able to provide a complete answer https://docs.flutter.io/flutter/widgets/Opacity-class.html — user1462442, Aug 07 '17 at 19:51

rafaelcb21 · Accepted Answer · 2017-08-09T19:36:45.967

I used Opacity but it became redundant after using ScaleTransition. With ScaleTransition it is possible to hide and show widgets.

I used 3 animations to be able to generate the cascade effect.

Below is the code and its result:

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new HomePage()));
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> with TickerProviderStateMixin {
  int _angle = 90;
  bool _isRotated = true;

  AnimationController _controller;
  Animation<double> _animation;
  Animation<double> _animation2;
  Animation<double> _animation3;

  @override
  void initState() {
    _controller = new AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 180),
    );

    _animation = new CurvedAnimation(
      parent: _controller,
      curve: new Interval(0.0, 1.0, curve: Curves.linear),
    );

    _animation2 = new CurvedAnimation(
      parent: _controller,
      curve: new Interval(0.5, 1.0, curve: Curves.linear),
    );

    _animation3 = new CurvedAnimation(
      parent: _controller,
      curve: new Interval(0.8, 1.0, curve: Curves.linear),
    );
    _controller.reverse();
    super.initState();
  }

  void _rotate(){
    setState((){
      if(_isRotated) {
        _angle = 45;
        _isRotated = false;
        _controller.forward();
      } else {
        _angle = 90;
        _isRotated = true;
        _controller.reverse();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
            new Positioned(
              bottom: 200.0,
              right: 24.0,
              child: new Container(
                child: new Row(
                  children: <Widget>[
                    new ScaleTransition(
                      scale: _animation3,
                      alignment: FractionalOffset.center,
                      child: new Container(
                        margin: new EdgeInsets.only(right: 16.0),
                        child: new Text(
                          'foo1',
                          style: new TextStyle(
                            fontSize: 13.0,
                            fontFamily: 'Roboto',
                            color: new Color(0xFF9E9E9E),
                            fontWeight: FontWeight.bold,
                          ),
                        ), 
                      ),
                    ),

                    new ScaleTransition(
                      scale: _animation3,
                      alignment: FractionalOffset.center,
                      child: new Material(
                        color: new Color(0xFF9E9E9E),
                        type: MaterialType.circle,
                        elevation: 6.0,
                        child: new GestureDetector(
                          child: new Container(
                            width: 40.0,
                            height: 40.0,
                            child: new InkWell(
                              onTap: (){
                                if(_angle == 45.0){
                                  print("foo1");
                                }
                              },
                              child: new Center(
                                child: new Icon(
                                  Icons.add,
                                  color: new Color(0xFFFFFFFF),
                                ),                      
                              ),
                            )
                          ),
                        )
                      ),
                    ),                                     
                  ],
                ),
              )
            ),

          new Positioned(
            bottom: 144.0,
            right: 24.0,
            child: new Container(
              child: new Row(
                children: <Widget>[
                  new ScaleTransition(
                    scale: _animation2,
                    alignment: FractionalOffset.center,
                    child: new Container(
                      margin: new EdgeInsets.only(right: 16.0),
                      child: new Text(
                        'foo2',
                        style: new TextStyle(
                          fontSize: 13.0,
                          fontFamily: 'Roboto',
                          color: new Color(0xFF9E9E9E),
                          fontWeight: FontWeight.bold,
                        ),
                      ), 
                    ),
                  ),

                  new ScaleTransition(
                    scale: _animation2,
                    alignment: FractionalOffset.center,
                    child: new Material(
                      color: new Color(0xFF00BFA5),
                      type: MaterialType.circle,
                      elevation: 6.0,
                      child: new GestureDetector(
                        child: new Container(
                          width: 40.0,
                          height: 40.0,
                          child: new InkWell(
                            onTap: (){
                              if(_angle == 45.0){
                                print("foo2");
                              }
                            },
                            child: new Center(
                              child: new Icon(
                                Icons.add,
                                color: new Color(0xFFFFFFFF),
                              ),                      
                            ),
                          )
                        ),
                      )
                    ),
                  ), 
                ],
              ),
            )
          ),
          new Positioned(
            bottom: 88.0,
            right: 24.0,
            child: new Container(
              child: new Row(
                children: <Widget>[
                  new ScaleTransition(
                    scale: _animation,
                    alignment: FractionalOffset.center,
                    child: new Container(
                      margin: new EdgeInsets.only(right: 16.0),
                      child: new Text(
                        'foo3',
                        style: new TextStyle(
                          fontSize: 13.0,
                          fontFamily: 'Roboto',
                          color: new Color(0xFF9E9E9E),
                          fontWeight: FontWeight.bold,
                        ),
                      ), 
                    ),
                  ),

                  new ScaleTransition(
                    scale: _animation,
                    alignment: FractionalOffset.center,
                    child: new Material(
                      color: new Color(0xFFE57373),
                      type: MaterialType.circle,
                      elevation: 6.0,
                      child: new GestureDetector(
                        child: new Container(
                          width: 40.0,
                          height: 40.0,
                          child: new InkWell(
                            onTap: (){
                              if(_angle == 45.0){
                                print("foo3");
                              }
                            },
                            child: new Center(
                              child: new Icon(
                                Icons.add,
                                color: new Color(0xFFFFFFFF),
                              ),                      
                            ),
                          )
                      ),
                    )
                    ),
                  ), 
                ],
              ),
            )
          ),
          new Positioned(
            bottom: 16.0,
            right: 16.0,
            child: new Material(
              color: new Color(0xFFE57373),
              type: MaterialType.circle,
              elevation: 6.0,
              child: new GestureDetector(
                child: new Container(
                  width: 56.0,
                  height: 56.00,
                  child: new InkWell(
                    onTap: _rotate,
                    child: new Center(
                      child: new RotationTransition(
                        turns: new AlwaysStoppedAnimation(_angle / 360),
                        child: new Icon(
                          Icons.add,
                          color: new Color(0xFFFFFFFF),
                        ),
                      )
                    ),
                  )
                ),
              )
            ),
          ),
        ]
      )
    );
  }
}

score 2 · Answer 2 · answered Apr 04 '19 at 22:13

you can see Flutter floating action button with speed dial or use https://pub.dartlang.org/packages/flutter_speed_dial or flutter Visibility widget or https://medium.com/@agungsurya/create-a-simple-animated-floatingactionbutton-in-flutter-2d24f37cfbcc

Flutter - Float Action Button - Hiding the visibility of items

2 Answers2