How do i fixed containers in Flutter?

0

I want to make first container fixed in center and second container fixed in right but i couldn't. I add mainAxisAlignment: MainAxisAlignment.spaceBetween in row line but it didn't work. Is there different properties to adjust position of widgets?

My Code:

new Container(
  width: 360,
  height: 502,
  decoration: new BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Color(0xffffffff),
        Color(0x00caebfe) 
      ],
      stops: [0,1]
    )
  ),
  child:Column(
    //crossAxisAlignment: CrossAxisAlignment.start,
    children:<Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            child: Text("JULY 2017",
              style: TextStyle(
                fontFamily: 'Baloo',
                color: Color(0xff181743),
                fontSize: 20,
                fontWeight: FontWeight.w400,
                fontStyle: FontStyle.normal,
              )
            )
          ),
          Container(
            alignment: Alignment.centerLeft,
            //padding: EdgeInsets.only(left:90.0),
            child: Column(
              children: <Widget>[
                new Container(
                width: 14,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c) 
                    ],
                    stops: [0,1]
                  ),
                )
              ),
              new Container(
                //margin: EdgeInsets.only(top:3.0),
                width: 23,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c) 
                    ],
                    stops: [0,1]
                  )
                )
              )
          ],)
          )
        ]
      )
    ]
  )
),

Is there different properties to adjust position of widgets?

flutter
dart
alignment
containers
row
asked on Stack Overflow Jan 9, 2020 by Batuhan Özkan • edited Jan 9, 2020 by João Soares

3 Answers

0

Are you trying to make your FirstContainer placed at the very center, and your SecondContainer at the very end?

If so, you might want to use Row, and Expanded

So it would be something like this:

Row(
    mainAxisSize: MainAxisSize.max,
    children: [
        /// Just a placeholder container to occupy 1/3 of the Row
        Expanded(child: Container()),
        Expanded(child: FirstContainer()),
        Expanded(child: SecondContainer()),
    ]
)

What this does, is add a placeholder container which occupies 1/3 of the Row, and your FirstContainer will be forced to be at the center, and SecondContainer section of the Row.

answered on Stack Overflow Jan 9, 2020 by Rick
0

Following what you said you wanted to achieve, as in having the text centred and the gradients all the way to the right, I've modified your code by adding an Expanded widget around the first Container in Row and removing the width of your top Container:

Container(
  height: 502,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Color(0xffffffff),
        Color(0x00caebfe)
      ],
      stops: [0,1]
    )
  ),
  child: Column(
    children:<Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(
            child: Center(
              child: Text("JULY 2017",
                style: TextStyle(
                  fontFamily: 'Baloo',
                  color: Color(0xff181743),
                  fontSize: 20,
                  fontWeight: FontWeight.w400,
                  fontStyle: FontStyle.normal,
                )
              ),
            ),
          ),
          Column(
            children: <Widget>[
              new Container(
                width: 14,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c)
                    ],
                    stops: [0,1]
                  ),
                )
              ),
              new Container(
                //margin: EdgeInsets.only(top:3.0),
                width: 23,
                height: 5,
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  gradient: LinearGradient(
                    colors: [
                      Color(0xfffe1e9a),
                      Color(0xfffea64c)
                    ],
                    stops: [0,1]
                  )
                )
              )
            ],)
        ]
      )
    ]
  )
),
answered on Stack Overflow Jan 9, 2020 by João Soares
0
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          body: new Container(
              width: 360,
              height: 502,
              decoration: new BoxDecoration(
                  gradient: LinearGradient(
                      colors: [Color(0xffffffff), Color(0x00caebfe)],
                      stops: [0, 1])),
              child: Stack(
                  children: <Widget>[
                    Positioned(
                      right: 0,
                      child: Container(
                          alignment: Alignment.center,
                          child: Text("JULY 2017",
                              style: TextStyle(
                                fontFamily: 'Baloo',
                                color: Color(0xff181743),
                                fontSize: 20,
                                fontWeight: FontWeight.w400,
                                fontStyle: FontStyle.normal,
                              ))),
                    ),
                    Align(
                        alignment: Alignment.center,
                        child: Container(
                            child: Column(
                          children: <Widget>[
                            new Container(
                                width: 14,
                                height: 5,
                                decoration: new BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    gradient: LinearGradient(colors: [
                                      Color(0xfffe1e9a),
                                      Color(0xfffea64c)
                                    ], stops: [
                                      0,
                                      1
                                    ]))),
                            new Container(
                                //margin: EdgeInsets.only(top:3.0),
                                width: 23,
                                height: 5,
                                decoration: new BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    gradient: LinearGradient(colors: [
                                      Color(0xfffe1e9a),
                                      Color(0xfffea64c)
                                    ], stops: [
                                      0,
                                      1
                                    ])))
                          ],
                        ))),
                  ])),
        ),
      ),
    );
  }

Check out this method using stack it makes it simple later can later modify thank-you.

answered on Stack Overflow Jan 9, 2020 by sagar acharya

User contributions licensed under CC BY-SA 3.0