• Taha Tesser's avatar
    Fix `ExpansionTile` properties cannot be updated with `setState` (#134218) · 30234a00
    Taha Tesser authored
    fixes [`ExpansionTile` properties aren't updated with `setState`](https://github.com/flutter/flutter/issues/24493)
    
    ### Code sample
    
    <details>
    <summary>expand to view the code sample</summary> 
    
    ```dart
    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(
          debugShowCheckedModeBanner: false,
          home: Example(),
        );
      }
    }
    
    class Example extends StatefulWidget {
      const Example({super.key});
    
      @override
      State<Example> createState() => _ExampleState();
    }
    
    class _ExampleState extends State<Example> {
      ShapeBorder collapsedShape = const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(4)),
      );
      Color collapsedTextColor = const Color(0xffffffff);
      Color collapsedBackgroundColor = const Color(0xffff0000);
      Color collapsedIconColor = const Color(0xffffffff);
      ShapeBorder shape = const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(16)),
      );
      Color backgroundColor = const Color(0xffff0000);
      Color textColor = const Color(0xffffffff);
      Color iconColor = const Color(0xffffffff);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ExpansionTile(
                    shape: shape,
                    backgroundColor: backgroundColor,
                    textColor: textColor,
                    iconColor: iconColor,
                    collapsedShape: collapsedShape,
                    collapsedTextColor: collapsedTextColor,
                    collapsedBackgroundColor: collapsedBackgroundColor,
                    collapsedIconColor: collapsedIconColor,
                    title: const Text('Collapsed ExpansionTile'),
                    children: const [
                      ListTile(
                        title: Text('Revealed!'),
                      ),
                    ],
                  ),
                  const SizedBox(height: 16),
                  ExpansionTile(
                    shape: shape,
                    backgroundColor: backgroundColor,
                    textColor: textColor,
                    iconColor: iconColor,
                    initiallyExpanded: true,
                    title: const Text('Expanded ExpansionTile'),
                    children: const [
                      ListTile(
                        title: Text('Revealed!'),
                      ),
                    ],
                  ),
                  const SizedBox(height: 16),
                  FilledButton(
                    onPressed: () {
                      setState(() {
                        collapsedShape = const RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(Radius.circular(50)),
                        );
                        collapsedTextColor = const Color(0xfff00000);
                        collapsedBackgroundColor = const Color(0xffffff00);
                        collapsedIconColor = const Color(0xfff00000);
    
                        shape = const RoundedRectangleBorder();
                        backgroundColor = const Color(0xfffff000);
                        textColor = const Color(0xfff00000);
                        iconColor = const Color(0xfff00000);
                      });
                    },
                    child: const Text('Update properties'),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }
    ```
    
    </details> 
    
    ### Before
    
    https://github.com/flutter/flutter/assets/48603081/b29aed98-38ff-40a3-9ed3-c4342ada35b6
    
    ### After
    
    https://github.com/flutter/flutter/assets/48603081/5e0b6a34-c577-40ed-8456-7ef55caa277b
    30234a00
expansion_tile_test.dart 43.1 KB