CODEWITHSUNDEEP
flutter
chichi
chichi

Reputation: 3302

Flutter: Using a List to display iconButtons in the fab does not work

Trying to use FabCircularMenu package and I am trying to display icons inside the FAB using a List. However, the button is showing nothing.

 List _fabBarIcons = [
      FaIcon(FontAwesomeIcons.search),
      FaIcon(FontAwesomeIcons.briefcase),
      FaIcon(FontAwesomeIcons.users),
      FaIcon(FontAwesomeIcons.calendar),
      FaIcon(FontAwesomeIcons.cog),
    ];

...List.generate(
          _fabBarIcons.length,
          (index) {
            Ink(
              decoration: const ShapeDecoration(
                color: Colors.cyan,
                shape: CircleBorder(),
              ),
              child: IconButton(
                icon: _fabBarIcons[index],
                splashColor: Colors.transparent,
                highlightColor: Colors.transparent,
              ),
            );
            return Container(
              height: 0,
            );
          },
        ),

I've tried to add colors to make it appear or other stuffs. I get zero error on the debug console. I have no clue why these IconButtons are not showing up here.

Upvotes: 1

Views: 55

Answers (1)

bluenile
bluenile

Reputation: 6029

You cannot see anything because you are returning a Container from List.generate. Instead you should be returning the Ink widget. Please see the code below :

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Test(),
        ),
      ),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  bool changeColor = false;

  List _fabBarIcons = [
    Icon(Icons.ac_unit),
    Icon(Icons.access_time),
    Icon(Icons.accessible),
    Icon(Icons.ad_units),
    Icon(Icons.search),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: List.generate(
          _fabBarIcons.length,
          (index) {
            return Ink(
              decoration: const ShapeDecoration(
                color: Colors.cyan,
                shape: CircleBorder(),
              ),
              child: IconButton(
                onPressed: () {},
                icon: _fabBarIcons[index],
                splashColor: Colors.transparent,
                highlightColor: Colors.transparent,
              ),
            );
          },
        ),
      ),
    );
  }
}

Upvotes: 1

Related Questions