CODEWITHSUNDEEP
androidflutterdart
dipansh
dipansh

Reputation: 514

The alignment property of the Align class is not working in flutter


I'm trying to move my container to the top left with the help of the Align class within a stack but the container is not moving from its place. I also tried the Positioned widget, but the Positioned widget is making the container invisible. Please let me know what I'm doing wrong.

**Code** 

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // device size
    final size = MediaQuery.of(context).size;

    return Scaffold(
      body: Container(
        color: Colors.blue,
        height: size.height,
        width: size.width,
        child: Stack( // stack takes in all the space of the device
          children: <Widget>[
            Align(
              alignment: Alignment(0, 0), // this doesn't work
              child: Container(
                height: 200,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Theme.of(context).primaryColor,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Output

enter image description here

Edit: The Positioned widget and the Align are working perfectly now after starting the app again by stoping it.

Upvotes: 0

Views: 1010

Answers (4)

Denish Borad
Denish Borad

Reputation: 41

Try one of this two snippets.

return Scaffold(
  body: Container(
    color: Colors.blue,
    height: size.height,
    width: size.width,
    child: Stack( 
      children: <Widget>[
        Align(
          alignment: Alignment.topCenter, 
          child: Container(
            height: 200,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Theme.of(context).primaryColor,
            ),
          ),
        )
      ],
    ),
  ),
);

return Scaffold(
  body: Container(
    color: Colors.blue,
    height: size.height,
    width: size.width,
    child: Stack( 
      fit: StackFit.expand,
      children: <Widget>[
        Positioned(
          top: 0,
          left: 0, 
          child: Container(
            height: 200,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Theme.of(context).primaryColor,
            ),
          ),
        )
      ],
    ),
  ),
);

Upvotes: 0

t00n
t00n

Reputation: 415

Assigns some width to the Positioned widget:

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // device size
    final size = MediaQuery.of(context).size;

    return Scaffold(
      body: Container(
        color: Colors.blue,
        height: size.height,
        width: size.width,
        child: Stack(
          fit: StackFit.loose,
          // stack takes in all the space of the device
          children: <Widget>[
            Positioned(
              top: 0,
              left: 0,
              width: 200,
              child: Container(
                height: 200,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.red,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Upvotes: 0

Jordan Kotiadis
Jordan Kotiadis

Reputation: 566

Wrap your widget with Position() or AnimatedPosition() and specify :top:0, left:0

Upvotes: 0

esentis
esentis

Reputation: 4666

Try alignment: Alignment.topLeft

import 'package:flutter/material.dart';

class Testtt extends StatelessWidget {
  const Testtt({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // device size
    final size = MediaQuery.of(context).size;

    return Scaffold(
      body: Container(
        color: Colors.blue,
        height: size.height,
        child: Stack(
          // stack takes in all the space of the device
          children: <Widget>[
            SizedBox(
              height: 200,
              width: size.width,
              child: Align(
                alignment: Alignment.topLeft,
                child: Container(
                  width: 200,
                  decoration: const BoxDecoration(
                    color: Colors.orange,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Result

Upvotes: 1

Related Questions