Actions in a scaffold are a different height than the menu/back icon #7185

Activity

1. eseidelGoogle

   added

   p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packages

   customer: leafy

   on Dec 8, 2016
2. eseidelGoogle commented on Dec 8, 2016

   

   eseidelGoogle

   on Dec 8, 2016

   Contributor

   More actions

   I had a similar problem last night when I tried to use an Icon widget instead of an IconButton widget in AppBar.actions. IconButton aligned properly, but Icon did not. Not sure if that's related to this or not.

   Is this blocking you?
3. eseidelGoogle commented on Dec 8, 2016

   

   eseidelGoogle

   on Dec 8, 2016

   Contributor

   More actions

   Looks like our layout computation for AX information may be wrong: #7205 If you're going to use a lot of that tool, we might want to improve our AX information a bit. ;)
4. DaveShuckerow commented on Dec 9, 2016

   

   DaveShuckerow

   on Dec 9, 2016

   ContributorAuthor

   More actions

   Not a blocker, but it's a UI cleanup that we'd like to do before EOY (EO next week, essentially).

   We only use it in the first page of the leafy app, as seen in the screenshot I sent you.
5. eseidelGoogle commented on Dec 9, 2016

   

   eseidelGoogle

   on Dec 9, 2016

   Contributor

   More actions

   For clarity: Which alignment would you expect? Baseline? Center? @Hixie is probably the right person to ask about alignment questions. I don't see any the AppBar attempting any specific alignment:
   https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/app_bar.dart#L59
6. DaveShuckerow commented on Dec 9, 2016

   

   DaveShuckerow

   on Dec 9, 2016

   ContributorAuthor

   More actions

   We expect a center alignment here.
7. eseidelGoogle

   added this to the 1: Top Customer Requests milestone on Dec 9, 2016
8. HansMuller commented on Dec 14, 2016

   

   HansMuller

   on Dec 14, 2016

   Contributor

   More actions

   Here's a test case.

   I've explicitly centered the switch so that it lines up with the center of the appbar's hamburger-title-actions row. As far as I can tell, the hamburger (the drawer icon on the left) is positioned correctly.

   I agree that the app bar should vertically center its action widgets by default however this should easy to workaround for the moment.

   import 'package:flutter/material.dart';
   import 'package:flutter/rendering.dart';
   
   class AppBarAlignment extends StatefulWidget {
     @override
     _AppBarAlignmentState createState() => new _AppBarAlignmentState();
   }
   
   class _AppBarAlignmentState extends State<AppBarAlignment> {
     static final List<String> _dropdownItems = <String>['One', 'Two', 'Free', 'Four'];
     String _dropdownValue = 'One';
     bool _switchValue = true;
   
     @override
     Widget build(BuildContext context) {
       debugPaintSizeEnabled = true;
       return new Scaffold(
         appBar: new AppBar(
           title: new Theme(
             data: new ThemeData(brightness: Brightness.dark),
             child: new SizedBox(
               width: 200.0,
               child: new DropdownButton<String>(
                 value: _dropdownValue,
                 onChanged: (String newValue) {
                   setState(() {
                     _dropdownValue = newValue;
                   });
                 },
                 items: _dropdownItems.map((String value) {
                   return new DropdownMenuItem<String>(
                     value: value,
                     child: new Text(value),
                   );
                 }).toList(),
               ),
             ),
           ),
           actions: <Widget>[
             new Theme(
               data: new ThemeData(brightness: Brightness.dark),
               child: new Center(
                 child: new Switch(
                   value: _switchValue,
                   onChanged: (bool value) {
                     setState(() {
                       _switchValue = value;
                     });
                   }
                 ),
               ),
             ),
           ],
         ),
         drawer: new Center(
           child: new Text('Hello World'),
         ),
         body: new Center(
           child: new Text('Hello World'),
         ),
       );
     }
   }
   
   void main() {
     runApp(new MaterialApp(home: new AppBarAlignment()));
   }
   
9. Hixie commented on Dec 14, 2016

   

   Hixie

   on Dec 14, 2016

   Contributor

   More actions

   I think the solution is just to put a cross axis alignment of center here in the actions row in the appbar:
   https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/app_bar.dart#L409
10. HansMuller

    self-assigned this

    on Dec 14, 2016
11. HansMuller commented on Dec 14, 2016

    

    HansMuller

    on Dec 14, 2016

    Contributor

    More actions

    I agree. Working on a test.
12. HansMuller

    closed this as completedin #7280on Dec 16, 2016
13. github-actions commented on Sep 5, 2021

    

    github-actionsbot

    on Sep 5, 2021

    More actions

    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.
14. github-actions

    locked as resolved and limited conversation to collaborators on Sep 5, 2021