Below is the code for the Row containing three elements, back button, topic name and profile button.I want to keep back button and topic name aligned to left side and profile button to right side. I am trying to align the image to right side but it is not happening.

Row(
                          children: [
                            GestureDetector(
                              child: Image(
                                image:
                                    AssetImage("assets/images/backbutton.png"),
                              ),
                              onTap: () {
                                Navigator.pushNamed(context, '/');
                              },
                            ),
                            Padding(
                              padding: EdgeInsets.fromLTRB(15, 0, 0, 0),
                              child: Text(
                                chapter.topic,
                                style: TextStyle(
                                  fontFamily: "Raleway",
                                  fontSize: 24.0,
                                  fontWeight: FontWeight.bold,
                                  color: Color.fromARGB(255, 4, 35, 93),
                                ),
                              ),
                            ),
                            SizedBox(
                              child: Padding(
                                padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                                child: Align(
                                  alignment: Alignment.centerRight,
                                  child: Image(
                                    image:
                                        AssetImage("assets/images/profile.png"),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),

CodePudding user response：

Wrap your profile picture "Align" widget with a "Flexible" widget. and that's it!.

Flexible(
  child: Align(
    alignment: Alignment.centerRight,
    child: Image(
      image: AssetImage("assets/images/profile.png"),
    ),
  ),
),

CodePudding user response：

Try Using Spacer()

Row(
                          children: [
                            GestureDetector(
                              child: Image(
                                image:
                                    AssetImage("assets/images/backbutton.png"),
                              ),
                              onTap: () {
                                Navigator.pushNamed(context, '/');
                              },
                            ),
                            Padding(
                              padding: EdgeInsets.fromLTRB(15, 0, 0, 0),
                              child: Text(
                                chapter.topic,
                                style: TextStyle(
                                  fontFamily: "Raleway",
                                  fontSize: 24.0,
                                  fontWeight: FontWeight.bold,
                                  color: Color.fromARGB(255, 4, 35, 93),
                                ),
                              ),
                            ),
Spacer(),
                            SizedBox(
                              child: Padding(
                                padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                                child: Align(
                                  alignment: Alignment.centerRight,
                                  child: Image(
                                    image:
                                        AssetImage("assets/images/profile.png"),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),

CodePudding user response：

you can use this widget hope it will help

https://api.flutter.dev/flutter/material/ListTile-class.html

ListView(
 children: const <Widget>[
Card(child: ListTile(title: Text('One-line ListTile'))),
Card(
  child: ListTile(
    leading: FlutterLogo(),
    title: Text('One-line with leading widget'),
  ),
),
Card(
  child: ListTile(
    title: Text('One-line with trailing widget'),
    trailing: Icon(Icons.more_vert),
  ),
),
Card(
  child: ListTile(
    leading: FlutterLogo(),
    title: Text('One-line with both widgets'),
    trailing: Icon(Icons.more_vert),
  ),
),
Card(
  child: ListTile(
    title: Text('One-line dense ListTile'),
    dense: true,
  ),
),
Card(
  child: ListTile(
    leading: FlutterLogo(size: 56.0),
    title: Text('Two-line ListTile'),
    subtitle: Text('Here is a second line'),
    trailing: Icon(Icons.more_vert),
  ),
),
Card(
  child: ListTile(
    leading: FlutterLogo(size: 72.0),
    title: Text('Three-line ListTile'),
    subtitle: Text(
      'A sufficiently long subtitle warrants three lines.'
    ),
    trailing: Icon(Icons.more_vert),
    isThreeLine: true,
  ),
),

], )