Row have title centered but other widget on the right-CodePudding

I'd like to keep my title centered & on 1 maxLine for any screen size while keeping my IconButton on the far right :

So far this is what I've written but it does not adapt to different screen sizes (title doesn't stay centered) :

Keep in mind title length can vary slightly depending on state

FULL CODE :

Scaffold(
      bottomNavigationBar: ClipRRect(
          borderRadius: const BorderRadius.only(
            topRight: Radius.circular(40),
            topLeft: Radius.circular(40),
          ),
          child: BottomAppBar(
              elevation: 4,
              child: Padding(
                padding: const EdgeInsets.all(28),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    const TitleRowQuestion(),
                  ],
                ),
              ))),
    );

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Expanded(
          flex: 1,
          child: SizedBox(),
        ),
        Expanded(
          flex: 4,
          child: Text(
            'Title stay centered one line'.hardcoded,
            maxLines: 1,
          ),
        ),
        Expanded(
          flex: 1,
          child: Align(
              alignment: Alignment.centerRight,
              child: IconButton(
                splashRadius: 20,
                onPressed: () {},
                icon: const Icon(
                  Icons.help_outline,
                ),
              )),
        ),
      ],
    );
  }
}

CodePudding user response：

You can follow this widget,

Padding(
  padding: const EdgeInsets.all(23),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      Expanded(
        child: Transform.translate(
          offset: Offset(24, 0), //24 for icon size
          child: Text(
            'Title needs to stay centered',
            textAlign: TextAlign.center,
          ),
        ),
      ),
      Align(
        alignment: Alignment.centerRight,
        child: IconButton(
          splashRadius: 20,
          onPressed: () {},
          icon: const Icon(
            Icons.help_outline,
          ),
        ),
      )
    ],
  ),
);

CodePudding user response：

You can use :

 Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Expanded(
                          child: Container(
                              child: Center(
                        child: Text(
                          '  datasdgasdgksagdkasgdk',
                          textAlign: TextAlign.center,
                        ),
                      ))),
                      Align(
                        alignment: Alignment.centerRight,
                        child: Text('data2'),
                      )
                    ],
                  )

This Works on all Screen Size for me, Hope this helps you too..

CodePudding user response：

Why don't you use ListTile, and make the the Title of it as Row with MainAxis centered, and the trailing would be your Icon:

Padding(
      padding: const EdgeInsets.all(23),
      child: ListTile(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Something"),
          ],
        ),

        trailing: IconButton(
          splashRadius: 20,
          onPressed: () {},
          icon: const Icon(
            Icons.help_outline,
          ),
        ),
      )
    )