Skip to content

Conversation

@HansMuller
Copy link
Contributor

@HansMuller HansMuller commented Jan 13, 2021

Added an AlignmentGeometry valued alignment property to ButtonStyle which defines how the button's child is aligned within the available space. This generally only applies with the button size is constrained to have a different size than it would have by default.

The following example constrains the width of 3 buttons to be 200. Their themes override the alignment to be center (same as the default), centerRight, and centerLeft.

Screen Shot 2021-01-13 at 12 50 55 PM

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SizedBox(
              width: 200,
              child: TextButton(
                onPressed: () { },
                child: Text('center'),
              ),
            ),
            SizedBox(height: 16),
            SizedBox(
              width: 200,
              child: ElevatedButton(
                onPressed: () { },
                child: Text('centerRight'),
              ),
            ),
            SizedBox(height: 16),
            SizedBox(
              width: 200,
              child: OutlinedButton(
                onPressed: () { },
                child: Text('centerLeft'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Home(),
      theme: ThemeData.light().copyWith(
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(alignment: Alignment.center),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(alignment: Alignment.centerRight),
        ),
        outlinedButtonTheme: OutlinedButtonThemeData(
          style: OutlinedButton.styleFrom(alignment: Alignment.centerLeft),
        ),
      ),
    ),
  );
}

Fixes #72023

@flutter-dashboard flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Jan 13, 2021
@google-cla google-cla bot added the cla: yes label Jan 13, 2021
Copy link
Contributor

@justinmc justinmc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM besides one small doc fix 👍

/// * [Feedback] for providing platform-specific feedback to certain actions.
final bool? enableFeedback;

/// The alignment of the button's [child].
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This [child] is an invalid reference. Either just child or I think you'll have to do [TextButton.child] or something like that.

@HansMuller HansMuller merged commit 489d29c into flutter:master Jan 13, 2021
@HansMuller HansMuller deleted the button_child_alignment branch January 13, 2021 22:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Material text selection menu overflow buttons should be full-width

2 participants