CODEWITHSUNDEEP
flutter
KirtM9
KirtM9

Reputation: 241

Changing size of floatingActionButton

I would like to change the size of a FloatingActionButton. However, the following is not accepting height and width values.

floatingActionButton: FloatingActionButton(
  backgroundColor: Color(0xff33333D),
  onPressed: () {},
  child: Icon(Icons.camera),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

How can I adjust to do so?

Upvotes: 0

Views: 244

Answers (1)

Thierry
Thierry

Reputation: 8383

FloatingActionButton sizes are defined in Material Design: https://material.io/components/buttons-floating-action-button

You have two sizes: default and mini:

enter image description here

To define a mini FloatingActionButton, just add mini: true:

floatingActionButton: FloatingActionButton(
  backgroundColor: Color(0xff33333D),
  mini: true,
  onPressed: () {},
  child: Icon(Icons.camera),
),

Now, if you want another size, you could use an ElevatedButton:

enter image description here

floatingActionButton: ConstrainedBox(
  constraints: BoxConstraints.tightFor(width: 200, height: 200),
  child: ElevatedButton(
    child: Icon(Icons.camera, size: 160),
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      shape: CircleBorder(),
    ),
  ),
),

Full source code

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      floatingActionButton: ConstrainedBox(
        constraints: BoxConstraints.tightFor(width: 200, height: 200),
        child: ElevatedButton(
          child: Icon(Icons.camera, size: 160),
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            shape: CircleBorder(),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 4.0,
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

You will find other ways to define Circle Buttons here: https://www.kindacode.com/article/how-to-make-circular-buttons-in-flutter/

Upvotes: 1

Related Questions