CODEWITHSUNDEEP
flutterflutter-layout
Tarun Binwal
Tarun Binwal

Reputation: 43

How do we can make a image to take the whole space available in the floating action button in flutter

I am trying to add a image in floating action button which I have done easily but the problem I am facing is that I don't know how to make this image to take the whole space available in the floating action button ... I tried my best researched in the internet but did not not fount anything ...any help is appreciated thanks in advance 

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
height: MediaQuery.of(context).size.width * 0.24,
width: MediaQuery.of(context).size.width * 0.24,
child: FloatingActionButton(
//backgroundColor:Colors.lightGreen,
child: Image.asset("assets/home_unselected.png"),
onPressed: () {}),
),

Upvotes: 1

Views: 1334

Answers (3)

Jpec
Jpec

Reputation: 97

You just have to put your widget immediately as the child for the floatingActionButton attribute:

      floatingActionButton: Image.asset("assets/icons/send_icon.png"),

By this way, you won't have unwanted padding.

You can find more info in the doc by double-clicking the attribute:

  /// A button displayed floating above [body], in the bottom right corner.
  ///
  /// Typically a [FloatingActionButton].
  final Widget? floatingActionButton;

Upvotes: -1

Darshan
Darshan

Reputation: 11669

You can make use of CircleAvatar widget and pass the desired image as backgroundImage alongwith giving a custom radius to it, as below:

child: FloatingActionButton(
            child: CircleAvatar(
              radius: 50,
              backgroundImage: AssetImage("assets/placeholder.png",
              ),
            ),
            onPressed: () {}),

enter image description here

Hope this answers your question.

Upvotes: 4

Silhoutte17
Silhoutte17

Reputation: 69

Have you tried warping the "Image" widget with "Expanded" widget?

Not sure about this though.

Upvotes: 0

Related Questions