Request for left-aligned floating Action Button

Request

In making a demo app to get a grasp of Flutter, I wanted to add an additional action button on the opposite side of the screen (Floating Action Buttons are placed at the bottom right). I request the support for a button to be situated on the bottom left (inline with the right button).

I am Also facing the same problem.
i cannot create a floating action button on bottom left side.

What does this mean exactly

(inline with the right button).

Did you check https://docs.flutter.io/flutter/material/Scaffold/floatingActionButtonLocation.html

With a custom

flutter/packages/flutter/lib/src/material/floating_action_button_location.dart

Lines 120 to 155 in cb3df70

    
           class _EndFloatFabLocation extends FloatingActionButtonLocation { 
        
             const _EndFloatFabLocation(); 
        
             @override 
        
             Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) { 
        
               // Compute the x-axis offset. 
        
               double fabX; 
        
               assert(scaffoldGeometry.textDirection != null); 
        
               switch (scaffoldGeometry.textDirection) { 
        
                 case TextDirection.rtl: 
        
                   // In RTL, the end of the screen is the left. 
        
                   final double endPadding = scaffoldGeometry.minInsets.left; 
        
                   fabX = kFloatingActionButtonMargin + endPadding; 
        
                   break; 
        
                 case TextDirection.ltr: 
        
                   // In LTR, the end of the screen is the right. 
        
                   final double endPadding = scaffoldGeometry.minInsets.right; 
        
                   fabX = scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width - kFloatingActionButtonMargin - endPadding; 
        
                 break; 
        
               } 
        
               // Compute the y-axis offset. 
        
               final double contentBottom = scaffoldGeometry.contentBottom; 
        
               final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height; 
        
               final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height; 
        
               final double snackBarHeight = scaffoldGeometry.snackBarSize.height; 
        
               double fabY = contentBottom - fabHeight - kFloatingActionButtonMargin; 
        
               if (snackBarHeight > 0.0) 
        
                 fabY = math.min(fabY, contentBottom - snackBarHeight - fabHeight - kFloatingActionButtonMargin); 
        
               if (bottomSheetHeight > 0.0) 
        
                 fabY = math.min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0); 
        
               return new Offset(fabX, fabY); 
        
             } 
        
           }

you should be able to specify the position.

i was also facing the same problem try this code

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        home: new _InboxHome(),
      );
    }
}

class _InboxHome extends StatefulWidget{
  @override
  State createState() => new InboxHomeState();
}

class InboxHomeState extends State<_InboxHome>{
  @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text("Inbox"),
        ),
        drawer: new Drawer(),
        floatingActionButton: new Row(
          children: <Widget>[
            new Padding(
              padding: new EdgeInsets.symmetric(
                horizontal: 15.0,
              ),
            ),
            new FloatingActionButton(
              child: new Icon(Icons.remove),
            ),
            new Padding(
              padding: new EdgeInsets.symmetric(
                horizontal: 134.0,
              ),
            ),
            new FloatingActionButton(
              child: new Icon(Icons.add),
            ),
          ],
        ),
      );
    }
}

@Ashad98

@Ashad98 please edit your comment and wrap code in ```
What about my suggestion above?

Thank You for editing my code

I would like this built in as well, it only makes sense to have the third option.

@zoechi

@zoechi Your code is not working for me. However, I feel like this option should be granted as startFloat and startDocked instead of looking up the text direction. I think that end should just be the left for RTL by default, but start should be added as well. This way the developer can position the button freely and the user has a customized position based on their layout orientation.
Additionaly, I think that leftFloating, rightFloating etc. should be implemented as well because you might not want your FAB to change position if the rest of your layout is not adaptive as well (there are other reason for this too: it is just nice to have control easily).

Bumping this one. In my opinion apps should consider left and right-hand holding positions for users, where a startFloat or startDocked would allow users to use left thumb to access the button (based on app preferences, since the orientation cannot be sensed).

I am aware this is not fully in line with Material design ;)

Using "add reaction" on the initial comment would increase priority while +1 comments are rather pointless and cause lots of people to get notified for no reason.
To get notified yourself use the [Subscribe] button to the top right instead.

Making a floating action button go left is only possible if we use a row widget at the end with fabs as children, but we need to assign the mainAxisAlignment: MainAxisAlignment.spaceBetween between a fab and a padding

I'd like to implement a FAB on the left that acts like a "go back" button on my app :) thank you contributors!!!

Use Expanded between two buttons seems better


floatingActionButton: new Padding(
        padding: const EdgeInsets.symmetric(horizontal: 0.0, vertical: 0.0),
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Padding(
              padding: new EdgeInsets.symmetric(
                horizontal: 15.0,
              ),
            ),
            FloatingActionButton(
              child: new Icon(Icons.remove),
            ),
            new Expanded(
              child: new Text(""),
            ),
            FloatingActionButton(
              child: new Icon(Icons.add),
            ),
          ],
        ),
      ),

You can use padding only for left alignment like this...

  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: Padding(
        padding: const EdgeInsets.only(left: 30.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            FloatingActionButton(
              onPressed: _incrementCounter,
              child: Icon(Icons.add),
            ),
            FloatingActionButton(
              onPressed: _decrementCounter,
              child: Icon(Icons.remove),
            )
          ],
        ),
      ),
    );
  }
}

I have to agree, it is pretty weird and seems unfinished. FloatingActionButtonLocation allows positioning in the top left or right, but only the bottom right? Surely an oversight and not intentional...?

FloatingActionButtonLocation.startUp and FloatingActionButtonLocation.endTop are currently align vertically center and it's misleading, I think instead should push it upwards.

Still, there is no solution. Please, resolve this issue

I am working on this.

The PR #51465 is merged.
You can now set the floatingActionButtonLocation of your Scaffold to FloatingActionButtonLocation.startFloat to create a FAB in the lower-left corner of the scaffold.

We did not implement support for multiple FABs on the same scaffold, as this is against Material guidelines.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Request for left-aligned floating Action Button #15122

Request

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	class _EndFloatFabLocation extends FloatingActionButtonLocation {
	const _EndFloatFabLocation();

	@override
	Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
	// Compute the x-axis offset.
	double fabX;
	assert(scaffoldGeometry.textDirection != null);
	switch (scaffoldGeometry.textDirection) {
	case TextDirection.rtl:
	// In RTL, the end of the screen is the left.
	final double endPadding = scaffoldGeometry.minInsets.left;
	fabX = kFloatingActionButtonMargin + endPadding;
	break;
	case TextDirection.ltr:
	// In LTR, the end of the screen is the right.
	final double endPadding = scaffoldGeometry.minInsets.right;
	fabX = scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width - kFloatingActionButtonMargin - endPadding;
	break;
	}

	// Compute the y-axis offset.
	final double contentBottom = scaffoldGeometry.contentBottom;
	final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
	final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
	final double snackBarHeight = scaffoldGeometry.snackBarSize.height;

	double fabY = contentBottom - fabHeight - kFloatingActionButtonMargin;
	if (snackBarHeight > 0.0)
	fabY = math.min(fabY, contentBottom - snackBarHeight - fabHeight - kFloatingActionButtonMargin);
	if (bottomSheetHeight > 0.0)
	fabY = math.min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0);

	return new Offset(fabX, fabY);
	}
	}

Request for left-aligned floating Action Button #15122

Description

Request

Activity

Ashad98 commented on Apr 29, 2018

zoechi commented on Apr 29, 2018

Ashad98 commented on May 25, 2018

zoechi commented on May 25, 2018

Ashad98 commented on May 30, 2018

ThinkDigitalSoftware commented on Jul 10, 2018

creativecreatorormaybenot commented on Aug 10, 2018

ThinkDigitalSoftware commented on Aug 10, 2018

Arno-Z commented on Jan 25, 2019

zoechi commented on Jan 27, 2019

ariG23498 commented on Feb 15, 2019

psyanite commented on Mar 2, 2019

leapit commented on May 15, 2019

PrakashJagan commented on Jul 23, 2019

hasen6 commented on Aug 21, 2019

dieudv commented on Sep 17, 2019

im-amir commented on Jan 14, 2020

pennzht commented on Jan 27, 2020

pennzht commented on Apr 25, 2020

github-actions commented on Aug 21, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions