Here i want the back button icon in the start and the text in the center of the row in flutter-CodePudding

import 'package:flutter/material.dart';

void main() => runApp(
      const MaterialApp(
        title: 'testing row',
        home: TestingRow(),
      ),
    );

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: const [
          Icon(
            Icons.keyboard_arrow_left,
            size: 20.0,
            color: Colors.white,
          ),
          Center(
            child: Text(
              'PERSONAL INFORMATION',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0,
                decoration: TextDecoration.none,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

Try this code

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

@override
 Widget build(BuildContext context) {
  return Container(
  color: Colors.blue,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    
    children: const [
      Icon(
        Icons.keyboard_arrow_left,
        size: 20.0,
        color: Colors.white,
      ),
      Expanded(
      child: Center(
        child: Text(
          'PERSONAL INFORMATION',
          style: TextStyle(
            color: Colors.white,
            fontSize: 20.0,
            decoration: TextDecoration.none,
          ),
        ),
      ),),
    ],
  ),
);
}
}

CodePudding user response：

In addition to the answers above, and the answers here if the row of yours is just the icon and the text adding an empty contianer and making

    mainAxisAlignment: MainAxisAlignment.spaceBetween,

will do the trick

Code:

 Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children:  [
            const Icon(
              Icons.keyboard_arrow_left,
              size: 20.0,
              color: Colors.white,
            ),
            const Text(
                'PERSONAL INFORMATION',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                  decoration: TextDecoration.none,
                ),
              ),

            Container(width: 20,),
          ],
        ),

CodePudding user response：

Try this:

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: const [
          Icon(
            Icons.keyboard_arrow_left,
            size: 20.0,
            color: Colors.white,
          ),
          Expanded( //Added expanded so it takes remaining space and center itself
            child: Center(
              child: Text(
                'PERSONAL INFORMATION',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                  decoration: TextDecoration.none,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}