How to add onPressed to multiple FloatingActionButton in flutter

Question

I have an example of a FloatingActionButton working multiple but I don't know how to add it onPressed to it. I found on the form of the following topic: https://stackoverflow.com/a/46480722/14451514

In the example there are three icons I need to know how I can onPressed it how I do that?


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(
                heroTag: null,
                backgroundColor: backgroundColor,
                mini: true,
                child: new Icon(icons[index], color: foregroundColor),
                onPressed: () {},
              ),
            ),
          );
          return child;
        }).toList()..add(
          new FloatingActionButton(
            heroTag: null,
            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();
              }
            },
          ),
        ),
      ),
    );
  }
}

If anyone knows the solution to that problem please help me

you just want to run the different functions for each 3 buttons right? — Atiq Ur Rehman, Oct 18 '20 at 19:17
Hi @MarwanAl, welcome to stackoverflow. I think you can improve your question by making it clearer. A good place to start would be https://stackoverflow.com/help/how-to-ask — Alex.F, Oct 18 '20 at 20:30
@MarwanAl What's the issue here? The code you show already has an empty `onPressed` callback there. — Christopher Moore, Oct 20 '20 at 03:14

Giridharan Venkatapathy · Answer 1 · 2020-10-18T20:06:44.980

1

I would suggest you to add a FAB Onpress button, use this github program. Speed Dail Floating Action Bar

https://github.com/tiagojencmartins/unicornspeeddial

edited Oct 18 '20 at 20:06

answered Oct 18 '20 at 19:25

Giridharan Venkatapathy

1,124
7
16

Hello brother..but this is only one and I want to use the multiple – Oct 18 '20 at 19:32
I'm sorry brother. See this program for help.. https://github.com/tiagojencmartins/unicornspeeddial – Giridharan Venkatapathy Oct 18 '20 at 19:58

score 0 · Answer 2 · answered Oct 18 '20 at 19:34

You need to extend your IconData list to a model that contains Function. It will look something like this:

     class NewModel {
      IconData iconData;
      Function func;          
     }

And then:

     static const List<NewModel> iconsWithFunc = 
                    [ 
                         /* Your Items with OnPressed Functions */      
                    ];

After that you can use it easily:

       child: new FloatingActionButton(
            heroTag: null,
            backgroundColor: backgroundColor,
            mini: true,
            child: new Icon(iconsWithFunc[index].iconData, color: foregroundColor),
            // Use it in here.
            onPressed: iconsWithFunc[index].func,
          ),

score 0 · Accepted Answer · answered Oct 18 '20 at 19:41

A List (Array) of functions can help you here, you have an index of the current item just get the function from List by index and call it onPress.


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
  ];

  static method1() {
    print('method 1');
  }

  static method2() {
    print('method 2');
  }

  static method3() {
    print('method 3');
  }

  List<Function> methods = [method1, method2, method3];

  @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(
                heroTag: null,
                backgroundColor: backgroundColor,
                mini: true,
                child: new Icon(icons[index], color: foregroundColor),
                onPressed: () {
                  methods[index]();
                },
              ),
            ),
          );
          return child;
        }).toList()
          ..add(
            new FloatingActionButton(
              heroTag: null,
              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();
                }
              },
            ),
          ),
      ),
    );
  }
}

try this out

Hello, brother. thanks for your reply . Yes I can see the print in the software bar but how do I add onPressed. I'm sorry but I'm new to flutter programming — , Oct 18 '20 at 19:52
you already have onPressred property in FloatingActionButton, — Atiq Ur Rehman, Oct 18 '20 at 19:57
I mean, I deleted the print example, trying to add onPressed, but it didn't work — , Oct 18 '20 at 20:03
like that: static method1() { onPressed: () {Navigator.push(context, MaterialPageRoute(builder: (context) => AboutUser(),));}} — , Oct 18 '20 at 20:11
it does not make sense to have multiple onPressed or Widgets you wan't to navigate then simply call the function Navigator.push(context, MaterialPageRoute(builder: (context) => AboutUser(),));}} there in function body — Atiq Ur Rehman, Oct 18 '20 at 20:14
Hi brother. I tried to do this from yesterday and it didn't work .I don't know how I do it — , Oct 19 '20 at 14:17
i think you making confuse yourself if you want a widget that has the OnPress or onTap function to perform then you can make use of Inkwell or GestureDetector width that has onTap — Atiq Ur Rehman, Oct 19 '20 at 15:26
If you can help me that good to me brother .I think that with you more easy — , Oct 19 '20 at 15:36

How to add onPressed to multiple FloatingActionButton in flutter

3 Answers3