Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Trouble trying to position Image on Container

I just don’t know what I’m doing wrong here. The idea is to stack a Network image on a Container that is immediately underneath the AppBar. The trouble is that the Image seems to be cropped or clipped or however you might want to put it once I try positioning it. The code for the same is below:

Screenshot
enter image description here

main.dart

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey
      ),
      home: MainScreen(),
    );
  }
}

main_screen.dart

import 'package:flutter/material.dart';
import './widgets/app_bar.dart';

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Color.fromRGBO(63, 64, 65, 1),
      appBar: AppBar(
        leading: Icon(Icons.arrow_back_ios, color: Colors.orange),
        title: Text('Cheese Chicken Burger'),
        backgroundColor: Theme.of(context).primaryColorDark,
        elevation: 0,
      ),
      body: Column(
        children: [
          CustomAppBar(),    //The widget throwing the problem
        ],
      )
    );
  }
}

custom_app_bar.dart(This is the widget where all the stacking happens)

class CustomAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: [
        Stack(
            children: [
              Container(
                height: 150,
                width: double.infinity,
                decoration: BoxDecoration(
                    color: Theme.of(context).primaryColorDark,
                    borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(120),
                        bottomLeft: Radius.circular(120)
                    ),
                    boxShadow: const [
                      BoxShadow(
                          color: Colors.black,
                          spreadRadius: 40,
                          blurRadius: 60,
                          offset: Offset(5, 10)
                      )
                    ]
                ),
              ),
              Positioned(
                top: 100,
                right: 0,
                left: 0,
                child: SizedBox(
                  width: 150,
                  height: 150,
                  child: Image.network('https://www.foodrepublic.com/wp-content/uploads/2012/03/033_FR11785.jpg'),
                ),
              )
            ]
        ),
      ],
    );
  }
}

Can someone please help me fix this? This is what I’m looking for

enter image description here

>Solution :

here is some solution with some question for what do you want exactly.
Inside your stack, the container determines your stack height. Let’s get a look:
I set the color to amber.

enter image description here

Your height 150. If we change it to 250, we’ll see this.

enter image description here

It’s just because of your Positioned widget. You have set your top value to 100.

If you try to set your top value to 10 or 0. You’ll see this:

enter image description here

For stack, your first container will specify your stack height.

Did I understand your ask ?

[UPDATED CODES]
Container:

Container(
                  height: 150, // You can set your stack height with this line
                  width: double.infinity,
                  decoration: const BoxDecoration(
                      color: Colors.amber,
                      borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(120),
                          bottomLeft: Radius.circular(120)),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black,
                            spreadRadius: 40,
                            blurRadius: 60,
                            offset: Offset(5, 10))
                      ]),
                ),

Positioned Widget:

Positioned(
                  top: 10, // You can change this line.
                  right: 0,
                  left: 0,
                  child: SizedBox(
                    width: 150,
                    height: 150,
                    child: Image.network('put your image url here'),
                  ),
                ),
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading