ดาวน์โหลด overlay_container - overlay

overlay_container

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

Overlay_container

วิดเจ็ต Flutter ที่ทำให้ลูกอยู่นอกลำดับชั้นของวิดเจ็ตดั้งเดิม

การสาธิต

การสาธิตนี้เป็นตัวอย่างที่นี่ คุณยังสามารถชำระเงินโฟลเดอร์ examples

คำอธิบาย.

เด็กที่ผ่านไปยังวิดเจ็ตนี้จะแสดงผลนอกลำดับชั้นของวิดเจ็ตเป็นภาพซ้อนทับไปยังต้นไม้วิดเจ็ตที่ออกมา เป็นผลให้วิดเจ็ตนี้เหมาะอย่างยิ่งสำหรับการสร้างตัวเลือกแบบเลื่อนลงที่กำหนดเองคำแนะนำการเติมข้อความอัตโนมัติบทสนทนา ฯลฯ คิดว่ามันเป็นวิดเจ็ตที่วางไว้อย่างแน่นอนและมีดัชนี Z ที่เป็นบวกเหนือส่วนที่เหลือของทรีวิดเจ็ต จริงๆแล้วมันเป็นเสื้อคลุมที่เป็นมิตรเหนือการซ้อนทับของ Flutter และ APIs ซ้อนทับ

หากคุณเคยใช้ React สิ่งนี้พยายามทำสิ่งที่ React Portal ทำในทางใดทางหนึ่ง

ตัวอย่าง.

 import 'package:flutter/material.dart' ;
import 'package:overlay_container/overlay_container.dart' ;

class MyApp extends StatelessWidget {
  @override
  Widget build ( BuildContext context) {
    return MaterialApp (
      title : 'Overlay Container Demo' ,
      theme : ThemeData (
        primarySwatch : Colors .blue,
      ),
      home : MyHomePage (),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState () => _MyHomePageState ();
}

class _MyHomePageState extends State < MyHomePage > {
  // Need to maintain a "show" state either locally or inside
  // a bloc.
  bool _dropdownShown = false ;

  void _toggleDropdown () {
    setState (() {
      _dropdownShown = ! _dropdownShown;
    });
  }

  @override
  Widget build ( BuildContext context) {
    return Scaffold (
      appBar : AppBar (
        title : Text ( 'Overlay Container Demo Page' ),
      ),
      body : Padding (
        padding : const EdgeInsets . all ( 20 ),
        child : Column (
          crossAxisAlignment : CrossAxisAlignment .start,
          children : < Widget > [
            RaisedButton (
              onPressed : _toggleDropdown,
              child : Column (
                children : < Widget > [
                  Text ( "Dropdown button" ),
                ],
              ),
            ),
            // By default the overlay (since this is a Column) will
            // be added right below the raised button
            // but outside the widget tree.
            // We can change that by supplying a "position".
            OverlayContainer (
              show : _dropdownShown,
              // Let's position this overlay to the right of the button.
              position : OverlayContainerPosition (
                // Left position.
                150 ,
                // Bottom position.
                45 ,
              ),
              // The content inside the overlay.
              child : Container (
                height : 70 ,
                padding : const EdgeInsets . all ( 20 ),
                margin : const EdgeInsets . only (top : 5 ),
                decoration : BoxDecoration (
                  color : Colors .white,
                  boxShadow : < BoxShadow > [
                    BoxShadow (
                      color : Colors .grey[ 300 ],
                      blurRadius : 3 ,
                      spreadRadius : 6 ,
                    )
                  ],
                ),
                child : Text ( "I render outside the n widget hierarchy." ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}