Todo for desktop - Can't center Elevated Buttons 'remove completed' & 'mark all completed'

[chuckd853]

I'v tried wrapping the buttons in Column and again in a Row in the `todo_widgets' didn't work.

Tried the same in the main code. That didn't work.

I also received error too many arguments...expected 0 got 1.

The buttons look centered on the phone app but in my desktop app using Expanded(flex: 25) layout they are not centered.

Not sure if it's a bug or how to fix.

[fzyzcjy]

Maybe it is not a bug of mobx? And you may need to show a minimal reproducible sample

[chuckd853]

yes of course. Sorry Forgot to add the code...

This is the original code of the main app:

body: TabBarView(
          children: [
            Row(
              children: [
                Expanded(flex: 25, child: TodoExample()),    // here's the widget
                Expanded(
                  flex: 75,
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border(
                        left: BorderSide(width: 2, color: Colors.black38),
                      ),
                    ),
                    child: CanvasWidget(),
                  ),
                ),
              ],
            ), //this is a full blank page to draw on
            NetworkWidget(),
            MapWidget(),
          ],
        ),

I tried wrapping the widget in a column:

body: TabBarView(
          children: [
            Row(
              children: [
                   Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      chidren: [
                        TodoExample()),    // here's the widget
                       ],),
                Expanded(
                  flex: 75, 
                  // more code

Here's the original relevant part of the widget code from github:

class ActionBar extends StatelessWidget {
  const ActionBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final list = Provider.of<TodoList>(context);

    return Column(children: <Widget>[
      Observer(
        builder: (_) {
          final selections = VisibilityFilter.values.map((f) => f == list.filter).toList(growable: false);
          return Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 8),
                child: ToggleButtons(
                  borderRadius: BorderRadius.circular(8),
                  onPressed: (index) {
                    list.filter = VisibilityFilter.values[index];
                  },
                  isSelected: selections,
                  children: const <Widget>[
                    Padding(
                      padding: EdgeInsets.only(left: 5, right: 5),
                      child: Text('All'),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 5, right: 5),
                      child: Text('Pending'),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 5, right: 5),
                      child: Text('Completed'),
                    )
                  ],
                ),
              ),
            ],
          );
        },
      ),
      Observer(
          builder: (_) => ButtonBar(
                children: <Widget>[
                  ElevatedButton(
                    onPressed: list.canRemoveAllCompleted ? list.removeCompleted : null,
                    child: const Text('Remove Completed'),
                  ),
                  ElevatedButton(
                    onPressed: list.canMarkAllCompleted ? list.markAllAsCompleted : null,
                    child: const Text('Mark All Completed'),
                  )
                ],
              ))
    ]);
  }
}

Then I tried wrapping the buttons in a column:

      Observer(
          builder: (_) => ButtonBar(
                Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
                  ElevatedButton(
                    onPressed: list.canRemoveAllCompleted ? list.removeCompleted : null,
                    child: const Text('Remove Completed'),
                  ),
                  ElevatedButton(
                    onPressed: list.canMarkAllCompleted ? list.markAllAsCompleted : null,
                    child: const Text('Mark All Completed'),
                  )
                ],
              ),