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
– Atiq Ur Rehman, Commented Oct 18, 2020 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 stackoverflow.com/help/how-to-ask — Alex.F
– Alex.F, Commented Oct 18, 2020 at 20:30
@MarwanAl What's the issue here? The code you show already has an empty onPressed callback there. — Christopher Moore
– Christopher Moore, Commented Oct 20, 2020 at 3:14

Giri · Accepted Answer · 2020-10-18 20:06:44Z

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, 2020 at 20:06

answered Oct 18, 2020 at 19:25

Giri

1,7241 gold badge10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user14451514 Over a year ago

Hello brother..but this is only one and I want to use the multiple

Giri Over a year ago

I'm sorry brother. See this program for help.. github.com/tiagojencmartins/unicornspeeddial

Atiq Ur Rehman · Accepted Answer · 2020-10-18 19:41:23Z

0

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

answered Oct 18, 2020 at 19:41

Atiq Ur Rehman

1,2352 gold badges19 silver badges34 bronze badges

10 Comments

user14451514 Over a year ago

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

Atiq Ur Rehman Over a year ago

you already have onPressred property in FloatingActionButton,

Atiq Ur Rehman Over a year ago

when you press it call the respected function accordingly

user14451514 Over a year ago

I mean, I deleted the print example, trying to add onPressed, but it didn't work

user14451514 Over a year ago

like that: static method1() { onPressed: () {Navigator.push(context, MaterialPageRoute(builder: (context) => AboutUser(),));}}

|

Akif · Accepted Answer · 2020-10-18 19:34:46Z

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,
          ),

Collectives™ on Stack Overflow

How to add onPressed to multiple FloatingActionButton in flutter

3 Answers 3

2 Comments

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related