Monday, October 23, 2023
HomeiOS DevelopmentFlutter Positioning Help

Flutter Positioning Help


I’m attempting to place this round expandable button to the bottom-right of the display screen. I do know I can add MainAxisAlignment: Alignment.finish or no matter, however that makes it in order that solely half the button is clickable. Is there another approach to do it?

Right here is a picture: Picture

Right here is my code:

                 Positioned(
                  prime: 10,
                  baby: Container(
                    top: measurement.top - measurement.top * .11,
                    width: measurement.width,
                    ornament: BoxDecoration(shade: Colours.white),
                    baby: Padding(
                      padding: EdgeInsets.all(10),
                      baby: Align(
                        alignment: Alignment.bottomRight,
                        baby: Column(
                          youngsters: [
                            if (_isExpanded)
                              _buildOptionButton(Icons.dangerous, 'Dangerous'),
                            if (_isExpanded)
                              _buildOptionButton(Icons.delete, 'Delete'),
                            if (_isExpanded)
                              _buildOptionButton(Icons.edit, 'Edit'),
                            SizedBox(
                              height: size.height * .11,
                              child: ElevatedButton(
                                  onPressed: () => {
                                        setState(() => {
                                              _isExpanded = !_isExpanded,
                                              _isOptionButtonVisible =
                                                  !_isExpanded,
                                              if (_isExpanded)
                                                {_animationController.forward()}
                                              else
                                                {_animationController.reverse()}
                                            })
                                      }, // Corrected onPressed callback
                                  style: ElevatedButton.styleFrom(
                                    shape: RoundedRectangleBorder(
                                        borderRadius:
                                            BorderRadius.circular(100.0)),
                                    primary: Color.fromARGB(255, 100, 100, 100),
                                  ),
                                  child: AnimatedBuilder(
                                    animation: _animationController,
                                    builder: (context, child) {
                                      return Transform.rotate(
                                        angle: _animationController.value *
                                            0.5 *
                                            3.1415,
                                        child: Icon(
                                          _isExpanded ? Icons.close : Icons.add,
                                        ),
                                      );
                                    },
                                  )),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),

EDIT: Right here is the _buildOptionButton technique

Widget _buildOptionButton(IconData iconData, String tooltip) {
    return Padding(
      padding: const EdgeInsets.solely(backside: 8.0),
      baby: FloatingActionButton(
        backgroundColor: Shade.fromARGB(255, 100, 100, 100),
        heroTag: tooltip,
        onPressed: () {
          print('Motion carried out for $tooltip');
        },
        tooltip: tooltip,
        baby: Icon(iconData),
      ),
    );
  }

Thanks!!!



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments