Есть ли проблема экрана со стеком во флаттере?

Question

Моя проблема в том, что У меня есть изображение в верхней части экрана, а под изображением остальная часть каркаса кузова, но с закругленными углами

Я использовал стек с позиционированным на панель приложений плавающим и прозрачным, контейнер под панелью приложений, но я не могу сделать закругленные углы контейнера с этим стеком, вот что я делаю

Scaffold(
    body: Stack(
        children: <Widget>[
            SingleChildScrollView(
                child: ...
            )
            Positioned(
                top: 0.0,
                left: 0.0,
                right: 0.0,
                child: AppBar(
                    ...
                ),
            ),
        ],
    ),
)

После того, как попробовал это, я не мог сделать этот контейнер с закругленными углами и Я получил это

Answer 1

Вы можете использовать виджет Stack and Position для достижения этого.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyHomePage(),
    ));

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final upperbodypartheight = 230;
  final double rounded = 30;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/crown.png"),
              fit: BoxFit.cover,
            ),
          ),
          height: 230,
          child: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0.0,
            title: Text("title"),
          ),
        ),
        Positioned(
          bottom: 0,
          child: Container(
            height: MediaQuery.of(context).size.height -
                upperbodypartheight +
                rounded,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                color: Colors.amber,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(rounded),
                    topRight: Radius.circular(rounded))),
          ),
        ),
      ],
    );
  }
}