I have a GridView with some buttons, like this :

I want the buttons to take as much space as possible so I didn't declare width or height, but I want them to be smaller when the user presses on it. Like in CSS I could something like width: 80%; but in Flutter I don't know how to do it. I tried getting the widget size and adding postFrameCallback but my solution doesn't work :

import 'package:flutter/material.dart';
import 'package:frontend/utils/get_widget_info.dart';

class CircularMenu extends StatefulWidget {
  List<Widget> children;
  CircularMenu({Key? key, required this.children}) : super(key: key);

  @override
  _CircularMenuState createState() => _CircularMenuState();
}

class _CircularMenuState extends State<CircularMenu> {
  bool _isOpen = false;
  bool _isAnimating = false;
  Size? _originalSize;
  double? _width;
  final GlobalKey _widgetKey = GlobalKey();


  void open() {
    setState(() {
      _isOpen = true;
    });
  }

  @override
  void initState() {
    WidgetsBinding.instance?.addPostFrameCallback((_) {
      setState(() {
          _originalSize = getWidgetSize(_widgetKey);
         print('Size: ${_originalSize!.width}, ${_originalSize!.height}');
      });
      
    });
    super.initState();
  }

  void close() {
    setState(() {
      _isOpen = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Container(
            color: Colors.red,
            width: _originalSize != null? _originalSize!.width * 0.7 : 40,
            key: _widgetKey,
            child: RawMaterialButton(
              fillColor: Colors.blue,
              shape: CircleBorder(),
              onPressed: () {
                if (_isAnimating) return;

                if (_isOpen) {
                  close();
                } else {
                  open();
                  getWidgetInfo(context, _widgetKey);
                }
              },
              child: Center(child: Text('HSK')),
            ),
          ),
        ],
      ),
    );
  }
}

Size getWidgetSize(GlobalKey widgetKey) {
  final RenderBox renderBox =
      widgetKey.currentContext?.findRenderObject() as RenderBox;

  final Size size = renderBox.size; // or _widgetKey.currentContext?.size

  //print('Size: ${size.width}, ${size.height}');
  return size;
}

CodePudding user response：

try width:double.infinity
or use FractionallySizedBox FractionallySizedBox( widthFactor: 0.8, heightFactor: 0.2, child: Container( color: Colors.green, ), );