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 for\nconfirmation",
              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

CodePudding user response：

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 for\nconfirmation",
          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>[],
          ),
        )
      ],
    ),
  ),
);

}

CodePudding user response：

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 for\nconfirmation",
              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>[...],
              ),
            )
          ],
        ),
      ),
    );
  }