no-image

Flutter之高斯模糊

import 'dart:ui';

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '高斯模糊Demo',
      home: Scaffold(
        body: Container(
          width: double.infinity,
          height: double.infinity,
          child: Stack(
            children: [
              //第一层
              Positioned.fill(child: Container(decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin:Alignment.bottomCenter,
                    end:Alignment.topCenter,
                    colors:[Colors.blue,Colors.purpleAccent]),
                image: DecorationImage(image: AssetImage('assets/poto.jpeg'))
              ))),
              //第二层高斯模糊
              Positioned.fill(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 0.3,sigmaY: 0.3),
                    child: Container(color: Colors.purple.withOpacity(0.6)),
              ))
              //第三层
            ]
          ),
        ),
      ),
    );
  }
}