flutter 如何使堆栈内容只出现在它所在的sizedbox中?

y3bcpkx1  于 2023-04-22  发布在  Flutter
关注(0)|答案(1)|浏览(91)

所以我有这个问题,我有这些小部件和backdropfilter内的堆栈出现在前面的内容上面。like this

SliverFillViewport(
  delegate: SliverChildListDelegate(
    [
      Column(
        children: [
          buildGreetings(),
          //TODO: quando scrolla deixa mais partes da página borrada?????
          SizedBox(
            width: 90.w,
            height: 20.h,
            child: Stack(
              fit: StackFit.expand,
              children: [
                Image.asset(
                  'images/tecnicoolhando.jpg',
                  fit: BoxFit.cover,
                ),
                BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                  child: Container(
                    color: Colors.black.withOpacity(0.5),
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(left: 3.w),
                      child: Wrap(
                        direction: Axis.vertical,
                        children: [
                          const Text(
                            'Acessar',
                            style: TextStyle(
                              fontSize: 23.0,
                              color: Colors.white,
                            ),
                          ),
                          Text(
                            'Acompanhe seus contratos',
                            style: GoogleFonts.lato(
                              fontSize: 20.0,
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(right: 3.w),
                      child: OutlinedButton(
                        onPressed: () => setState(() {}),
                        style: ButtonStyle(
                          padding: const MaterialStatePropertyAll(EdgeInsets.all(10)),
                          shape: MaterialStatePropertyAll(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(50),
                            ),
                          ),
                          side: const MaterialStatePropertyAll(
                            BorderSide(
                              color: Colors.white,
                            ),
                          ),
                        ),
                        child: const Icon(Icons.arrow_right),
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
          buildYouQualify()
        ],
      ),
    ],
  ),
),

所以我试着改变StackFit,重新排列和调整大小框,但到现在还没有明确的答案。我如何使这个backdropfilter只应用于指定的区域?

62lalag4

62lalag41#

用ClipRRect Package

ClipRRect(
    child: SizedBox(
        height: 200,
        child: Stack(
          ...
  )

相关问题