Question 230308 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Attach custom container to the bottom of the screen

I have a RegisterScreen and i have an image as a Background and over said image i want a container with a glassmorphism effect but my custom GlassmorphismContainer widget won’t attach to the bottom of the screen

class RegisterScreen extends StatelessWidget {
  const RegisterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: const BoxConstraints.expand(),
      decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage("lib/assets/images/rainforest_Placeholder.jpg"),
              fit: BoxFit.cover)),
      child: Stack(
        children: [
          Align(
            alignment: Alignment.bottomCenter,
            child: GlassmorphismContainer(
                width: MediaQuery.of(context).size.width, height: 350),
          ),
        ],
      ),
    );
  }
}

class GlassmorphismContainer extends StatelessWidget {
  final double width;
  final double height;
  final Widget? child;

  const GlassmorphismContainer(
      {super.key, required this.width, required this.height, this.child});

  @override
  Widget build(BuildContext context) {
    if (child == null) {
      return Stack(
        children: <Widget>[
          ConstrainedBox(
            constraints: const BoxConstraints.expand(),
          ),
          Center(
            child: ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                child: Container(
                  width: width,
                  height: height,
                  decoration: BoxDecoration(
                      color: Colors.grey.shade600.withOpacity(0.5)),
                ),
              ),
            ),
          ),
        ],
      );
    }
    return Stack(
      children: <Widget>[
        ConstrainedBox(
          constraints: const BoxConstraints.expand(),
        ),
        Center(
          child: ClipRect(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
              child: Container(
                width: width,
                height: height,
                decoration:
                    BoxDecoration(color: Colors.grey.shade600.withOpacity(0.5)),
                child: child,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

I have already tried with column and MainAxisAlignment.end and the above method with a Stack and an Align

Tags:

2

Answers


  1. 0

    if I did not understand wrong, to a achieve such a behaviour, you can use column and mainAxisAlignment.spaceBetween with an SizedBox:

    class RegisterScreen extends StatelessWidget {
  const RegisterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: const BoxConstraints.expand(),
      decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage("lib/assets/images/rainforest_Placeholder.jpg"),
              fit: BoxFit.cover)),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SizedBox(
            height: 10,
          ),
          GlassmorphismContainer(
              width: MediaQuery.of(context).size.width, height: 350),
        ],
      ),
    );
  }
}

    Also in your custom Glassmorphism class, ConstrainedBox throw an error. should care and may consider use another widget.

    Login or Signup to reply.
  2. 0

    you’re using the Align widget to position the GlassmorphismContainer at the bottom center of the screen. Instead, you should use the Positioned widget.

    Stack(
  children: [
    Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: GlassmorphismContainer(
        width: MediaQuery.of(context).size.width,
        height: 350,
      ),
    ),
  ],
),

    You can set the top, bottom, right, left positions of your screen as your wish.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search