Repository: flutter
Issue: Extended FAB properties have odd behavior
Labels: framework,f: material design,d: api docs,a: quality,team-design,triaged-design

Sum up

- [ ] FAB.isExtended does not create an extended FAB
- [ ] FAB does not animate changes in shape

---

Thought I'd fix https://github.com/flutter/flutter/issues/111770 right quick and noticed that the FAB did not behave as expected per this comment https://github.com/flutter/flutter/issues/111770#issuecomment-1255265283

I thought the FAB would automatically animate itself when I changed its config using the `extended` constructor. I am not sure if this is an incorrect assumption but I thought it has some of this already built in. Maybe it needs and AnimatedContainer for this?

Then I noticed the docs seem to think so, but only if you use `isExtended`?

```dart
  /// The [Scaffold] animates the appearance of ordinary floating
  /// action buttons with scale and rotation transitions. Extended
  /// floating action buttons are scaled and faded in.
  final bool isExtended;
```

However, setting the `isExtended` in the base constructor doesn't actually create an extended FloatingActionButton.

---

https://user-images.githubusercontent.com/16964204/227065069-170fd4d9-31ef-44ec-8c5b-cebb70def7bf.mov


Here is the sample code I came up with for https://github.com/flutter/flutter/issues/111770:

```dart
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// Flutter code sample for [FloatingActionButton].

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: FabExample(),
    );
  }
}

class FabExample extends StatefulWidget {
  const FabExample({super.key});

  @override
  State<FabExample> createState() => _FabExampleState();
}

class _FabExampleState extends State<FabExample> {
  bool isExtended = true;

  bool handleScrollNotification(ScrollNotification notification) {
    bool shouldExtend = isExtended;
    if (notification is ScrollStartNotification) {
      shouldExtend = false;
    } else if (notification is ScrollEndNotification) {
      shouldExtend = true;
    }
    if (isExtended != shouldExtend) {
      setState(() {
        // React to a change in isExtended
        isExtended = shouldExtend;
      });
    }
    return false;
  }

  @override
  Widget build(BuildContext context) {
    final Widget floatingActionButton = isExtended
        ? FloatingActionButton.extended(
      onPressed: () {
        // Add your onPressed code here!
      },
      backgroundColor: Colors.green,
      icon: const Icon(Icons.add),
      label: const Text('Create'),
    )
        : FloatingActionButton(
      onPressed: () {
        // Add your onPressed code here!
      },
      backgroundColor: Colors.green,
      child: const Icon(Icons.add),
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text('FloatingActionButton Sample'),
      ),
      body: NotificationListener<ScrollNotification>(
        onNotification: handleScrollNotification,
        child: ListView.builder(
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return Card(child: ListTile(title: Text('ListTile $index')));
          },
        ),
      ),
      floatingActionButton: floatingActionButton,
    );
  }
}

```