JULIUS
JULIUS

Reputation: 121

How can I position text in flutter?

I am new to flutter. I want to set a text/label above the buttons. I did not found any simple text or label widget in flutter.

The text should be very big (picture) and at the right of the screen and I want to keep the position of the buttons. How can I achieve this with Flutter ?

Thank you for your help.

enter image description here

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.only(top: 375.0),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("1"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("2"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("3"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("+"),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 20,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("4"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("5"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("6"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("-"),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 20,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("7"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("8"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("9"),
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("*"),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 20,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  SizedBox(
                    height: 80,
                    width: 290,
                    child: FloatingActionButton.extended(
                      elevation: 0.2,
                      onPressed: () {},
                      label: Text("="),
                      isExtended: true,
                    ),
                  ),
                  SizedBox(
                    height: 100,
                    width: 90,
                    child: FloatingActionButton(
                      elevation: 0.2,
                      onPressed: () {},
                      child: Text("/"),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 1

Views: 4367

Answers (2)

Milad jalali
Milad jalali

Reputation: 692

Expanded in flutter

Use Expanded :

Expanded(
          child: Align(
            alignment: Alignment.centerRight,
            child: Text(
              "My Text",
              textAlign: TextAlign.right,
              style: TextStyle(fontSize: 68),
            ),
          ),
        ),

Full code:

      @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: <Widget>[
            SizedBox(height: 24,),
            Expanded(
              child: Align(
                alignment: Alignment.centerRight,
                child: Text(
                  "My Text",
                  textAlign: TextAlign.right,
                  style: TextStyle(fontSize: 68),
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("1"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("2"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("3"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("+"),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("4"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("5"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("6"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("-"),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("7"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("8"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("9"),
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("*"),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(
                  height: 80,
                  width: 290,
                  child: FloatingActionButton.extended(
                    elevation: 0.2,
                    onPressed: () {},
                    label: Text("="),
                    isExtended: true,
                  ),
                ),
                SizedBox(
                  height: 100,
                  width: 90,
                  child: FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {},
                    child: Text("/"),
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }

Upvotes: 3

Kennedypz
Kennedypz

Reputation: 472

You can use:

Center(
   child: Text(
        "Your text goes here",
         style: TextStyle(
           fontSize: 30.0
         ),
   ),
),

Upvotes: 1

Related Questions