0

コンテナの中心から不透明度を取り除き、その下の画像を見えるようにしたい。

私が欲しいもの:

画像1

私が試したこと:

画像2

私が試したコード:

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

class AppFour extends StatefulWidget {
  @override
  _AppFourState createState() => _AppFourState();
}

class _AppFourState extends State<AppFour> {
  String img = 'https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('$img'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Opacity(
            opacity: 0.5,
            child: Container(
              color: Colors.white,
            ),
          ),
          Center(
            child: Container(
              height: MediaQuery.of(context).size.height / 1.5,
              width: MediaQuery.of(context).size.width / 1.5,
              decoration: BoxDecoration(
                color: Colors.transparent,
                image: DecorationImage(
                    image: NetworkImage('$img'),
                    fit: BoxFit.fitHeight),
                borderRadius: BorderRadius.circular(5.0),
                border: Border.all(
                  color: Colors.white,
                  width: 2.0,
                ),
                boxShadow: [
                  BoxShadow(
                      color: Colors.black,
                      offset: Offset(0.0, 0.0),
                      blurRadius: 10.0)
                ],
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.grey[800],
        child: Transform.rotate(
          angle: 45,
          child: Icon(FontAwesomeIcons.syncAlt),
        ),
        onPressed: () {},
      ),
    );
  }
}
4

1 に答える 1