CODEWITHSUNDEEP
flutter
HARISH
HARISH

Reputation: 179

aligning text inside row in flutter

In my fluttr App, I want to display a text on the left side and a button on the right side of the same row. I gave the proper alignment but still its not coming, can any one let me know where I made the mistake, below is the code

Widget build(BuildContext context) {
  return Scaffold(body:SingleChildScrollView(
        child:  Padding(
          padding: const EdgeInsets.symmetric(
            vertical: 80.0,
          ),
          child: Container(
     child: Row(children: <Widget>[
        new Container(
          alignment: Alignment.topLeft,
          child: Align(
            child: Text(
              'Filters',
              style: const TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black54),
            ),
          ),
        ),
        Container(
            alignment: Alignment.topRight,
            child: OutlineButton(
              child: Text(
                'Reset',
                style: const TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.black54),
              ),
              onPressed: null,
            )),
      ]),
  ))));
  }

output of code

this

how to align filter to left and Reset button to right of the screen?

Thank you

Upvotes: 1

Views: 111

Answers (4)

iamrishan
iamrishan

Reputation: 104

just set the row's horizontal alignment (MainAxisAlignment)

see result

Widget build(BuildContext context) {
  return Scaffold(
          body: SingleChildScrollView(
              child: Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 80.0,
                  ),
                  child: Container(
                    padding: EdgeInsets.all(20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween, //change in your code
                      children: <Widget>[
                      new Container(
                        alignment: Alignment.topLeft,
                        child: Align(
                          child: Text(
                            'Filters',
                            style: const TextStyle(
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.black54),
                          ),
                        ),
                      ),
                      Container(
                          alignment: Alignment.topRight,
                          child: OutlinedButton(
                            child: Text(
                              'Reset',
                              style: const TextStyle(
                                  fontSize: 20.0,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.black54),
                            ),
                            onPressed: null,
                          )),
                    ]),
                  ))));
}

mainAxisAlignment: MainAxisAlignment.spaceBetween, //change in your code

Upvotes: 0

Yadhu
Yadhu

Reputation: 3305

Row{
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 crossAxisAlignment: CrossAxisAlignment.center,
 children:<Widget>[
  Text('Left Text'),
  OutlineButton(
   child:Text('Right Button',),
  ),
]}

This should suffice your requirement I suppose

Upvotes: 0

Salma
Salma

Reputation: 1280

you can do that by providing an axis alignment to the row.

this will place items on both end of the row

Row{
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children:<Widget>[
  Text('Left Text'),
  OutlineButton(
   child:Text('Right Button',),
  ),
]}

i suggest reading this article to fully understand how layouts work in flutter [https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041][1]

Upvotes: 0

anmol.majhail
anmol.majhail

Reputation: 51316

Couple of ways to get it:

1> use mainAxisAlignment: MainAxisAlignment.spaceBetween, in Row()

OR

2> Use Spacer() widget between your widgets.

Code:

Row(
                    //  mainAxisAlignment: MainAxisAlignment.spaceBetween,  //  first way
                      children: <Widget>[
                    new Container(
                      alignment: Alignment.topLeft,
                      child: Align(
                        child: Text(
                          'Filters',
                          style: const TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.bold,
                              color: Colors.black54),
                        ),
                      ),
                    ),
                    Spacer(),  // second way
                    Container(
                        alignment: Alignment.topRight,
                        child: OutlineButton(
                          child: Text(
                            'Reset',
                            style: const TextStyle(
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.black54),
                          ),
                          onPressed: null,
                        )),
                  ])

Upvotes: 1

Related Questions