Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Text positioning in the centre instead of beginning

I am creating a profile and I want the text to be modified from Center to the start. I used mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.start, but no help, this was the outcome: enter image description here

Here it’s the code:

import 'package:flutter/material.dart';

class EditProfileBPage extends StatefulWidget {
  @override
  EditProfileBState createState() => EditProfileBState();
}

class EditProfileBState extends State<EditProfileBPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Padding(
            padding: EdgeInsets.only(top: 60),
            child: Column(children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  BackButton(),
                  Text('Edit profile',
                      style: TextStyle(fontWeight: FontWeight.bold))
                ],
              ),
              SizedBox(
                height: 30,
              ),
              Padding(
                padding: const EdgeInsets.all(15.0),
                child: Text(
                  'Keep your personal details private.Information you add here is visible to anyoane who can view your profile.',
                  style: TextStyle(color: Colors.grey, fontSize: 15),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Center(
                  child: CircleAvatar(
                      radius: 60,
                      backgroundColor: Colors.white,
                      child: CircleAvatar(
                          radius: 46,
                          backgroundColor: Colors.grey.shade100,
                          child: Text('Pic')))),
              FilledButton(
                child: Text(
                  'EDIT AVATAR',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => EditProfileBPage()));
                },
                style: ButtonStyle(
                  backgroundColor: MaterialStatePropertyAll(
                    Colors.black,
                  ),
                  foregroundColor: MaterialStatePropertyAll(
                    Colors.white,
                  ),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Center(
                  child: Padding(
                padding: const EdgeInsets.all(13.0),
                child: Image.asset('assets/coverphoto.png'),
              )),
              FilledButton(
                child: Text(
                  'EDIT COVER PHOTO',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => EditProfileBPage()));
                },
                style: ButtonStyle(
                  backgroundColor: MaterialStatePropertyAll(
                    Colors.black,
                  ),
                  foregroundColor: MaterialStatePropertyAll(
                    Colors.white,
                  ),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Name',
                        style: TextStyle(fontSize: 15),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        'Name Influencer',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 18),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        'Username',
                        style: TextStyle(fontSize: 15),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        'Username Influencer',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 18),
                      ),
                    ]),
              ),
            ])));
  }
}

I also want to add all the widgets and text under edit profile in a scrollview but I don’t know how , I want to be scrollable , and edit profile to be in the center ( not next to the back button)

Tags:

2

Answers


  1. 0

    Set this crossAxisAlignment: CrossAxisAlignment.start for both columns. The top column do not have any alignment set. You can also use
    crossAxisAlignment: CrossAxisAlignment.stretchto stretch elements horizontally to fill.

    And for making title in appbar center they set centerTitle property as true in AppBar.

    And to make this scrollable use custom scrollview Or you can just simply wrap the Top column with SingleChildScrollView

    Login or Signup to reply.
  2. 0

    try this:

    import 'package:flutter/material.dart';

class EditProfileBPage extends StatefulWidget {
  const EditProfileBPage({super.key});

  @override
  EditProfileBState createState() => EditProfileBState();
}

class EditProfileBState extends State<EditProfileBPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                BackButton(),
                Text('Edit profile',
                    style: TextStyle(fontWeight: FontWeight.bold))
              ],
            ),
            const SizedBox(
              height: 30,
            ),
            const Padding(
              padding: EdgeInsets.all(15.0),
              child: Text(
                'Keep your personal details private.Information you add here is visible to anyoane who can view your profile.',
                style: TextStyle(color: Colors.grey, fontSize: 15),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Center(
                child: CircleAvatar(
                    radius: 60,
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                        radius: 46,
                        backgroundColor: Colors.grey.shade100,
                        child: const Text('Pic')))),
            Center(
              child: FilledButton(
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => const EditProfileBPage()));
                },
                style: const ButtonStyle(
                  backgroundColor: WidgetStatePropertyAll(
                    Colors.black,
                  ),
                  foregroundColor: WidgetStatePropertyAll(
                    Colors.white,
                  ),
                ),
                child: const Text(
                  'EDIT AVATAR',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Center(
                child: Padding(
              padding: const EdgeInsets.all(13.0),
              child: Image.asset('assets/coverphoto.png'),
            )),
            Center(
              child: FilledButton(
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => const EditProfileBPage()));
                },
                style: const ButtonStyle(
                  backgroundColor: WidgetStatePropertyAll(
                    Colors.black,
                  ),
                  foregroundColor: WidgetStatePropertyAll(
                    Colors.white,
                  ),
                ),
                child: const Text(
                  'EDIT COVER PHOTO',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            const Padding(
              padding: EdgeInsets.all(15),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Name',
                    style: TextStyle(fontSize: 15),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    'Name Influencer',
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    'Username',
                    style: TextStyle(fontSize: 15),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    'Username Influencer',
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

    just add the crossAxisAlignment: CrossAxisAlignment.start in the main Column, and wrap all the other widgets you want to be in the center of the screen with Center widget.

    here is the result:
    enter image description here

    let me know if it helped

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search