Question 244954 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter button alignment

I am very new to Flutter development. I am trying to make a button that would be on the bottom right of the page, but it is not working.

import 'package:flutter/material.dart';
class GoBack extends StatelessWidget {
  const GoBack({required this.onGoBack, super.key});

  final void Function() onGoBack;

  @override
  Widget build(context) {
    return OutlinedButton(
      onPressed: onGoBack,
      style: OutlinedButton.styleFrom(
        backgroundColor: const Color.fromARGB(208, 93, 0, 255),
        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
        minimumSize: const Size(60, 60),
      ),
      child: const Row(
        mainAxisSize: MainAxisSize.min,
        children: [
        Icon(Icons.arrow_circle_left_rounded),
      ]),
      );
  }
}

I tried adding:

alignment: Alignment.bottomRight,

I am probably using this wrong tho.

Tags:

2

Answers


  1. 0

    I think it is better for you to use floatingActionButtonLocation property of Scaffold widget. You can customize the button style with the FloatingActionButton widget.

    return Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
  floatingActionButton: FloatingActionButton.small(
    onPressed: () {},
    child: Icon(Icons.arrow_circle_left_rounded),
  ),
  body: ...

    );

    You can visit https://blog.logrocket.com/flutter-floatingactionbutton-a-complete-tutorial-with-examples/ or https://api.flutter.dev/flutter/material/FloatingActionButton-class.html to see more details.

    Login or Signup to reply.
  2. 0

    you might use FloatingActionButton within Scaffold.

    Scaffold(
floatingActionButton: FloatingActionButton(),)

    It is located at right bottom by default.

    Check documentation here :
    https://api.flutter.dev/flutter/material/FloatingActionButton-class.html

    You can also use

    floatingActionButtonLocation: FloatingActionButtonLocation.endFloat

    Therefore you can play with button location.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search