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

FloatingActionButton not displaying Flutter

click here to see screenshotI am creating a FloatingActionButton inside Scaffold widget, but it is not visible and clickable. There is no error in the console and the body section of the scaffold is visible. The background color of the FAB is green and icon color is black and the scaffold color is white so I believe it is not due color contrast.

     @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: const Center(child: Text("Hello Products")),
          floatingActionButton: FloatingActionButton(
            backgroundColor: KColors.primary,
            onPressed: (){KLoggerHelper.debug("FAB is here");},
            child: const Icon(Iconsax.add, color: KColors.black),
          ),
        );
      }

My Flutter Version is
Flutter 3.24.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 5874a72aa4 (5 weeks ago) • 2024-08-20 16:46:00 -0500
Engine • revision c9b9d5780d
Tools • Dart 3.5.1 • DevTools 2.37.2

  1. tried changing color contrast did not work.
  2. tried downgrading flutter version did not work.
Tags:

2

Answers


  1. 0

    Try adding AppBar to the Scaffold. And also why you don’t try to for example in the body of Scaffold set a SingleChildScrollView and after that in Column or Row put all the content you want?

    Login or Signup to reply.
  2. 0

    To address the issue of the FloatingActionButton (FAB) not being visible or clickable, despite no errors in the console and proper color contrast, one possible cause is indeed the usage of the Iconsax package for the icon.

    Here’s a breakdown of what could be happening:

    Iconsax Compatibility: The Iconsax package is a third-party package, and there’s a chance that the Iconsax.add icon might not be rendering correctly in the FloatingActionButton. While the body section is visible, the FAB might not appear if the icon fails to load or is incompatible with the current Flutter version (Flutter 3.24.1 in this case).

    Troubleshooting the Icon: Since the FAB itself is not showing or responding, and the only custom element within the button is the Iconsax.add, it’s worth verifying if the icon renders properly in other widgets. Try using a default Flutter icon (like Icons.add) to check if the FAB appears and works as expected:
    @override Widget build(BuildContext context) { return Scaffold( body: const Center(child: Text("Hello Products")), floatingActionButton: FloatingActionButton( backgroundColor: KColors.primary, onPressed: () { KLoggerHelper.debug("FAB is here"); }, child: const Icon(Icons.add, color: KColors.black), ), ); }
    If the FAB shows up with the default Icons.add, this indicates that the issue lies with the Iconsax.add icon, either due to a rendering issue, missing dependency, or compatibility problem.

    Verifying Iconsax Package:

    Ensure that the Iconsax package is properly included in your pubspec.yaml file and that the correct version is installed.
    If the package is correctly configured, try using other icons from Iconsax to check if the problem is isolated to the add icon or affects other icons as well.
    If other Iconsax icons also don’t render, it may suggest a package compatibility issue with your current Flutter version (3.24.1). You can check the package documentation and repository for any known issues related to your Flutter version.
    Alternative Approach: If you confirm the issue is with Iconsax, consider filing a bug report on the package’s GitHub repository or using another reliable icon package (like FontAwesome or Material Icons) until the issue is resolved.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search