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

Flutter – How to add more than one child to a floatingActionButton

How can I add more than one child to my FloatingActionButton? I want to add some shadow under the button, and the only way I found to do it was by adding a container, but therefore I had to remove my icon child. I am new to flutter and coding in general.

floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => AddTaskPage(),
            ),
          );
        },
        tooltip: 'Add Task',
        
        backgroundColor: Colors.blue,
        //child: Icon(Icons.add, color: Colors.white),
        child: Container(
        decoration: BoxDecoration(
          color: Colors.transparent,
          borderRadius: BorderRadius.all(
            Radius.circular(100),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.blue.withOpacity(0.3),
              spreadRadius: 7,
              blurRadius: 7,
              offset: Offset(3, 5),
            ),
          ],
        ),
      ),
        
      ),

I tried using the Stack function but could not figure it out. Maybe it is my lack of experience; it probably is

Tags:

2

Answers


  1. 0

    use the Stack widget to placing both the Icon and the Container inside it. The Stack widget allows you to overlay widgets on top of each other

    floatingActionButton: FloatingActionButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => AddTaskPage(),
      ),
    );
  },
  tooltip: 'Add Task',
  backgroundColor: Colors.blue,
  child: Stack(
    alignment: Alignment.center,
    children: [
      Icon(Icons.add, color: Colors.white),
      Container(
        decoration: BoxDecoration(
          color: Colors.transparent,
          borderRadius: BorderRadius.all(
            Radius.circular(100),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.blue.withOpacity(0.3),
              spreadRadius: 7,
              blurRadius: 7,
              offset: Offset(3, 5),
            ),
          ],
        ),
      ),
    ],
  ),
),
    Login or Signup to reply.
  2. 0

    yo make shadow under the FAB you must be add the property namd elevation and accept a double number like this :

        FloatingActionButton(
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => AddTaskPage(),
        ),
      );
    },
    tooltip: 'Add Task',
    // Use elevation to make shadow under the button
    elevation: 20,  
    backgroundColor: Colors.blue,
    // use shape to make the FAB Rounded
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(100)
    ),
  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search