How do I make the text to be on the left? Flutter and Dart

grizzzzzy
January 14, 2023
173 views
1 vote
2 Answers

How do I make the text "Your Result" and "You are most likely $result" to be on the left side of the page?

Here is my code:

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(220, 255, 255, 255),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const Text(
              "Your Result",
              style: TextStyle(
                  fontFamily: 'DM Sans Regular',
                  fontSize: 36,
                  fontWeight: FontWeight.bold),
              textAlign: TextAlign.left,
            ),
            const SizedBox(height: 16),
            Text("You are most likely $result"),
            const SizedBox(height: 16),
            SizedBox(
              width: 326,
              height: 326,
              child: Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(40),
                  //set border radius more than 50% of height and width to make circle
                ),
                child: Center(
                  child: Text(
                    "$score / ${questionList.length}",
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                        fontFamily: 'DM Sans Regular',
                        fontSize: 48,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 16),
            const Text(
              "Please consult with your specialist fornconfirmation",
              style: TextStyle(
                fontFamily: 'DM Sans Regular',
                fontSize: 16,
                fontWeight: FontWeight.bold,
                overflow: TextOverflow.ellipsis,
              ),
              maxLines: 2,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 100),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[...],
              ),
            )
          ],
        ),
      ),
    );
  }

This is the output from the code
The output is looking like this

This is the design that I actually want it to look like
Actually I want it to be looking like this

Answers

I was looking through your code, and I found 2 solutions to your problem, the first one I found was to change the cross axis aligment of the column to: crossAxisAlignment: CrossAxisAlignment.stretch, but this solution has a problem, this would mess your current layout so you would need to fix the all the layout using paddings.
The second one that I found, and the one that I judge it is the best, is to wrap each text inside a row, so the rows would position the text at the left side of the screen as you want, and you can even add some padding to reach the result you showed in the final design:

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: const Color.fromARGB(220, 255, 255, 255),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Row(
          children: [
            const Text(
              "Your Result",
              style: TextStyle(
                  fontFamily: 'DM Sans Regular',
                  fontSize: 36,
                  fontWeight: FontWeight.bold),
              textAlign: TextAlign.left,
            ),
          ],
        ),
        const SizedBox(height: 16),
        Row(
          children: [
            Text("You are most likely $result"),
          ],
        ),
        const SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [],
        ),
        const SizedBox(height: 16),
        SizedBox(
          width: 326,
          height: 326,
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(40),
              //set border radius more than 50% of height and width to make circle
            ),
            child: Center(
              child: Text(
                "$score / ${questionList.length}",
                textAlign: TextAlign.center,
                style: const TextStyle(
                    fontFamily: 'DM Sans Regular',
                    fontSize: 48,
                    fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
        const SizedBox(height: 16),
        const Text(
          "Please consult with your specialist fornconfirmation",
          style: TextStyle(
            fontFamily: 'DM Sans Regular',
            fontSize: 16,
            fontWeight: FontWeight.bold,
            overflow: TextOverflow.ellipsis,
          ),
          maxLines: 2,
          textAlign: TextAlign.center,
        ),
        const SizedBox(height: 100),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 50),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[],
          ),
        )
      ],
    ),
  ),
);

}

Wrap Text widget with align and set alignment:Alignment.topLeft,

Like this,

          Align (
              alignment:Alignment.topLeft,
              child: const 
              Text(
                "Your Result",
                style: TextStyle(
                    fontFamily: 'DM Sans Regular',
                    fontSize: 36,
                    fontWeight: FontWeight.bold),
                textAlign: TextAlign.left,
              ),
            ),

Full code:

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(220, 255, 255, 255),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Align (
              alignment:Alignment.topLeft,
              child: const 
              Text(
                "Your Result",
                style: TextStyle(
                    fontFamily: 'DM Sans Regular',
                    fontSize: 36,
                    fontWeight: FontWeight.bold),
                textAlign: TextAlign.left,
              ),
            ),
            const SizedBox(height: 16),
            Align (
              alignment:Alignment.topLeft,
              child:Text("You are most likely $result"),),
            const SizedBox(height: 16),
            SizedBox(
              width: 326,
              height: 326,
              child: Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(40),
                  //set border radius more than 50% of height and width to make circle
                ),
                child: Center(
                  child: Text(
                    "$score / ${questionList.length}",
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                        fontFamily: 'DM Sans Regular',
                        fontSize: 48,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 16),
            const Text(
              "Please consult with your specialist fornconfirmation",
              style: TextStyle(
                fontFamily: 'DM Sans Regular',
                fontSize: 16,
                fontWeight: FontWeight.bold,
                overflow: TextOverflow.ellipsis,
              ),
              maxLines: 2,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 100),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[...],
              ),
            )
          ],
        ),
      ),
    );
  }

Please signup or login to give your own answer.

Click here to cancel reply.