Блог

Как я могу разместить контейнер поверх границы другого контейнера, как показано на рисунке ниже?

Я создаю фоновое изображение, чтобы оно работало, но мне просто интересно, могу ли я сделать это, не используя какое-либо изображение в качестве фона?

Вы можете использовать Positioned виджет внутри Stack таким образом, чтобы разместить a Container поверх другого:

 Scaffold(
  body: SafeArea(
    top: true,
    child: SingleChildScrollView(
      child: Stack(
        overflow: Overflow.visible, // TO MAKE SECOND CONTAINER VISIBLE
        children: [
          Container(
            height: 250.0,
            color: Colors.green,
            child: Center(child: Text("First Container")),
          ),
          Positioned(
            bottom: -25.0,
            left: (MediaQuery.of(context).size.width/4),
            width: 200.0,
            height: 50.0,
            child: Container(
              color: Colors.red,
              child: Center(child: Text("Second Container"))
            ),
          )
        ],
      ),
    ),
  )
);
  

Я надеюсь, что этот ответ поможет вам.

Вы можете добиться этого с помощью виджета Stack amp; Positioned, как показано в следующем коде :

 import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
      body: Stack(
        overflow: Overflow.visible,
        children: [
          Container(
            color: Colors.green,
            width: MediaQuery.of(context).size.width,
            height: 200,
            child: Center(
              child: Text("First Container"),
            ),
          ),
          Positioned(
            top: 175,
            left: (MediaQuery.of(context).size.width / 2) - 100,
            child: Center(
              child: Container(
                color: Colors.red,
                width: 200,
                height: 50,
                child: Center(
                  child: Text("Second Container"),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}