Need help centering an Image with Flutter or dart

Question

So I want to take this API from moviedb and display the image poster, then I implement it on backgroundimage, so that the text appears on top. I successfully implement the backgroundimage but can't figure out How to properly place it, i have tried using Alignment.topCenter but it overlapped the appbar. So I use Alignment.center but it looks odd

the code

class DetailPage extends StatelessWidget {
  final Movie? movies; 
  const DetailPage({
    Key? key, 
    this.movies, 
    }) : super(key: key);     
  // final List<Movie> movie_detail;
  @override
  Widget build(BuildContext context) {
    var container = Container (
      padding: const EdgeInsets.only(top: 0),
      decoration:  BoxDecoration(
        image: DecorationImage(
          alignment: Alignment.topCenter,
          image: NetworkImage(
            'https://image.tmdb.org/t/p/original/${movies?.backdrop_path ?? " "}'
            ),
            fit: BoxFit.fitWidth,
            ),
      ),
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.center,
            end: Alignment.bottomCenter,
            colors: [
              Colors.black26,
              Colors.blueGrey
            ]
          )
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
          centerTitle: true,
          title: Text(movies?.original_title ?? ""),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(top: 200, left: 12, right: 12),
            child: Column(
            children: [ 
              // Text(movies!.poster_path)
              Padding(
                padding: const EdgeInsets.only(top: 4),
                child: Text(movies!.original_title, style: const TextStyle(
                fontSize: 28.0,
                fontWeight: FontWeight.bold,
                height: 2
                  ),
                ),
              ),
               Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // Text(
                  //   movies!.vote_average,
                  // ),
                  Text(
                    movies!.release_date,
                    style: const TextStyle(fontSize: 14,
                    fontWeight: FontWeight.bold), 
                    textAlign: TextAlign.right,
                  ),
                  const Icon(Icons.date_range, color: Colors.yellow,),
                      ],
                ),
                  const Divider(height: 1.0, color: Colors.white,),
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: Text(movies!.overview,
                style: const TextStyle(fontSize: 16),
                ),
              ),            
               
                ],
                ),  
            ),
        ), 
    ),
      ),
    );
    return container;
  }
}

the question is how to make the image not overlapping the appbar

Answer 1

Better to use Stack widget .

        Stack(
                alignment: Alignment.center, // Center children in the Stack
                children: [
    Image,
    Center(child:Text())
]
)