Question 266683 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Why FloatingActionButton is not shown

I try to show floating button on list view long press, but floating button is not shown.
Any ideas why?

I use the following code:

return GestureDetector(
          onLongPress: () {
            print('test');
            FloatingActionButton.extended(
              onPressed: () {
                print('test1');
              },
              icon: const Icon(Icons.add),
              label: const Text('Usuń'),
            );
Tags:

2

Answers


  1. 0

    @Illusion is right: in order to display the button, it needs to be in the Widget tree.

    Here’s an example of a working Flutter app that shows the button on a long-press:

    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool showButton = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onLongPress: () {
          setState(() => showButton = true);
        },
      ),
      floatingActionButton: showButton
          ? FloatingActionButton.extended(
              onPressed: () {},
              icon: const Icon(Icons.add),
              label: const Text('Usuń'),
            )
          : null,
    );
  }
}
    Login or Signup to reply.
  2. 0

    I copied the example code from FloatingActionButton documentation and modified a bit to allow showing/hiding the FAB, this should give you some idea. The key points are to put FloatingActionButton in Scaffold‘s floatingActionButton field and use some logic (I use basic setState here) to show/hide the FAB based on a bool.

    import 'package:flutter/material.dart';



void main() {
  runApp(const FloatingActionButtonExampleApp());
}

class FloatingActionButtonExampleApp extends StatelessWidget {
  const FloatingActionButtonExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const FloatingActionButtonExample(),
    );
  }
}

class FloatingActionButtonExample extends StatefulWidget {
  const FloatingActionButtonExample({super.key});

  @override
  State<FloatingActionButtonExample> createState() =>
      _FloatingActionButtonExampleState();
}

class _FloatingActionButtonExampleState
    extends State<FloatingActionButtonExample> {
  // The FAB's foregroundColor, backgroundColor, and shape
  static const List<(Color?, Color? background, ShapeBorder?)> customizations =
      <(Color?, Color?, ShapeBorder?)>[
    (null, null, null),parameters.
    (null, Colors.green, null),
    (Colors.white, Colors.green, null),
    (Colors.white, Colors.green, CircleBorder()),
  ];
  int index = 0;
  bool showFab = false; // <-- to control FAB state shown/hidden

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FloatingActionButton Sample'),
      ),
      body: Center(
          child: GestureDetector(
              onTap: () {
                // to change the state
                setState(() {
                  showFab = !showFab;
                });
              },
              child: const Text('Press this to show/hide FAB'))),
      // use the FAB like this
      floatingActionButton: showFab
          ? FloatingActionButton(
              onPressed: () {
                setState(() {
                  index = (index + 1) % customizations.length;
                });
              },
              foregroundColor: customizations[index].$1,
              backgroundColor: customizations[index].$2,
              shape: customizations[index].$3,
              child: const Icon(Icons.navigation),
            )
          : null,
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search