Flutter — виджет карты с наложением на контейнер

Да, вы можете добиться этого с помощью виджета Stack. Вы можете наложить карту на фон и обеспечить отступ сверху или снизу.

Простой пример будет выглядеть так:

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Stack(
      children: <Widget>[
        // The containers in the background
        new Column(
          children: <Widget>[
            new Container(
              height: MediaQuery.of(context).size.height * .65,
              color: Colors.blue,
            ),
            new Container(
              height: MediaQuery.of(context).size.height * .35,
              color: Colors.white,
            )
          ],
        ),
        // The card widget with top padding, 
        // incase if you wanted bottom padding to work, 
        // set the `alignment` of container to Alignment.bottomCenter
        new Container(
          alignment: Alignment.topCenter,
          padding: new EdgeInsets.only(
              top: MediaQuery.of(context).size.height * .58,
              right: 20.0,
              left: 20.0),
          child: new Container(
            height: 200.0,
            width: MediaQuery.of(context).size.width,
            child: new Card(
              color: Colors.white,
              elevation: 4.0,
            ),
          ),
        )
      ],
    );
  }
}

Вывод приведенного выше кода будет выглядеть примерно так:

Надеюсь это поможет!

Для этого вы реализуете Positioned карты с помощью виджета Stack во Flutter.

Класс Stack полезен, если вы хотите простым способом перекрыть несколько дочерних элементов,

Positioned виджет, который контролирует, где находится дочерний элемент стека.

Примечание. Stack рисует дочерние элементы по порядку, начиная с первого дочернего элемента.

???? Итак, давайте начнем, не теряя времени, как мы это делаем.

Создайте виджет Stack и оберните его внутри виджета Positioned, чтобы придать ему правильное положение, и установите положение виджета, как вам нужно.

  @override
  Widget build(BuildContext context) {
    return new Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(
          top: 0,
          child: Container(
            color: Colors.deepPurple,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * .35,
          ),
        ),
        Positioned(
          top: MediaQuery.of(context).size.height * .25,
          left: 15,
          right: 15,
          child: Card(
            elevation: 8,
            color: Colors.white,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            child: Container(
              width: MediaQuery.of(context).size.height * .90,
              height: 220,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.scanner,
                        color: Colors.deepPurple,
                        size: 45,
                      ),
                      Text("SCAN QR")
                    ],
                  ),
                  Container(
                    height: 100,
                    width: 2,
                    color: Colors.deepPurple,
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                   children: <Widget>[
                     Icon(
                       Icons.bluetooth,
                       color: Colors.deepPurple,
                       size: 45,
                     ),
                     Text("BEACON")
                   ],
                  )

                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

Вот пример работы с наложением:

class _MyHomePageState extends State<MyHomePage> {
     double _width = 0.0;
     double _height = 0.0;

     @override
     Widget build(BuildContext context) {
      _width = MediaQuery.of(context).size.width;
      _height = MediaQuery.of(context).size.height;
      return Scaffold(
       backgroundColor: Colors.white,
       body: Stack(
        children: <Widget>[
          // The containers in the background and scrollable
         getScrollableBody(),

         // This container will work as Overlay
         getOverlayWidget()
        ],
      ),
   );
 }

 Widget getOverlayWidget() {
   return new Container(
     alignment: Alignment.bottomCenter,
     child: new Container(
      height: 100.0,
      width: _width,
      color: Colors.cyan.withOpacity(0.4),
     ),
   );
 }
 Widget getScrollableBody() {
  return SingleChildScrollView(
    child: new Column(
      children: <Widget>[
        new Container(
         height: _height * .65,
         color: Colors.yellow,
       ),
       new Container(
         height: _height * .65,
         color: Colors.brown,
       ),
       new Container(
        margin: EdgeInsets.only(bottom: 100.0),
        height: _height * .65,
        color: Colors.orange,
       ),
     ],
   ),
  );
 }
}

Вот результат кода: Прокручиваемое тело под настраиваемой нижней панелью

Скриншот:

Вместо жесткого кодирования Positioned или Container следует использовать Align.

Код:

@override
Widget build(BuildContext context) {
  final size = MediaQuery.of(context).size;
  return Scaffold(
    body: Stack(
      children: [
        Column(
          children: [
            Expanded(flex: 2, child: Container(color: Colors.indigo)),
            Expanded(child: Container(color: Colors.white)),
          ],
        ),
        Align(
          alignment: Alignment(0, 0.5),
          child: Container(
            width: size.width * 0.9,
            height: size.height * 0.4,
            child: Card(
              elevation: 12,
              child: Center(child: Text('CARD', style: Theme.of(context).textTheme.headline2)),
            ),
          ),
        ),
      ],
    ),
  );
}