Flutter 如何制作一个包含背景图像的颤振应用程序，背景图像覆盖整个屏幕，圆圈按钮内有一个返回句子的图像？

使用flatter、dart和vscode制作android应用程序

我需要创建一个颤振应用程序的图像，延伸到整个背景。 在这上面，我需要一个圆圈按钮，里面有图片，当按下按钮时会在上面返回一个句子。我知道如何制作背景部分，但是每个带有图像的圆形按钮的例子都不起作用

这是我到目前为止对背景图像的代码，你不必使用它来帮助我，我对任何事情都持开放态度

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Stack(
            children: <Widget>[
              Container(
                child: FractionallySizedBox(
                  heightFactor: 1.2,
                  widthFactor: 1.1,
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("assets/images/gext.png"),
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ); 
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了StatefulWidget{
@凌驾
状态createState（）{
返回_MyAppState（）；
}
}
类MyAppState扩展了状态{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
正文：安全区(
子：堆栈(
儿童：[
容器(
孩子：部分物理盒子(
高度系数：1.2，
宽度系数：1.1，
孩子：装饰盒(
装饰：盒子装饰(
图像：装饰图像(
图像：AssetImage（“assets/images/gext.png”），
fit:BoxFit.fill，
),
),
),
),
),
],
),
),
),
); 
}
}

任何帮助都将不胜感激，谢谢

这个怎么样：

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyPage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyPage extends StatefulWidget {
  MyPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  bool _shouldDisplaySentence = false;

  Widget _buildTopButton() {
    return GestureDetector(
      onTap: () => this.setState(() {
        _shouldDisplaySentence = !_shouldDisplaySentence;
      }),
      child: SizedBox(
        height: 60.0,
        width: 60.0,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(60.0 / 2),
          child: Image.network('https://picsum.photos/100'),
        ),
      ),
    );
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            Image.network(
              'https://picsum.photos/1000',
              fit: BoxFit.cover,
              height: MediaQuery.of(context).size.height,
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Column(children: [
                if (_shouldDisplaySentence) Text('The secret sentence is showing'),
                _buildTopButton(),
              ]),
            ),
          ],
        ),
      ),
    );
  }
}

void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyPage（标题：“颤振演示主页”），
);
}
}
类MyPage扩展了StatefulWidget{
MyPage（{Key-Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyPageState createState（）=>\u MyPageState（）；
}
类MyPageState扩展了状态{
bool(你应该显示句子)=false ;；
小部件_buildTopButton（）{
返回手势检测器(
onTap:（）=>此.setState（）{
_shouldDisplay句子=！\u shouldDisplay句子；
}),
孩子：大小盒子(
身高：60.0，
宽度：60.0，
孩子：ClipRRect(
边界半径：边界半径。圆形（60.0/2），
子：Image.network（'https://picsum.photos/100'),
),
),
);
}
小部件构建（构建上下文）{
返回脚手架(
正文：安全区(
子：堆栈(
儿童：[
图像网络(
'https://picsum.photos/1000',
适合：BoxFit.cover，
高度：MediaQuery.of（context）.size.height，
),
对齐(
对齐：alignment.topCenter，
子项：列（子项：[
如果（_shouldDisplaySession）文本（'显示秘密句子'），
_buildTopButton（），
]),
),
],
),
),
);
}
}

首先，我简化了显示背景图像的方式。 然后我使用手势检测器，而不是使用任何类型的按钮。我通过将图像传递到一个

ClipRRect

中，使其具有适当的半径，从而使图像成为圆形

如果您想在点击按钮时获得一些效果，那么我们可能不想选择手势检测器

---

请注意，图像是随机的，每次重新加载时都会更改。

我收到一个错误。找不到MediaQuery窗口小部件。@mjnitro我的错，我只是更新了代码段，将页面与应用程序分开，以便您可以访问媒体查询。现在该工作了