如何制作一个包含在整个屏幕上拉伸的背景图像的颤动应用程序，带有返回句子的图像的圆形按钮？

Posted 2023-02-23

【中文标题】如何制作一个包含在整个屏幕上拉伸的背景图像的颤动应用程序，带有返回句子的图像的圆形按钮？

【英文标题】：How to make a flutter app that contains a background image stretched over the entire screen, circle button with an image inside that returns sentence?

【发布时间】：2021-07-08 16:07:03

【问题描述】：

使用flutter、dart和vscode制作安卓应用。

我需要创建一个 Flutter 应用，其图像可以覆盖整个背景。 Like this. 最重要的是，我需要一个圆形按钮，里面有图片，like this，按下时会在上面返回一个句子。我知道如何制作背景部分，但是每个带有图片的圆形按钮的示例都不起作用。

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

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,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ); 
  

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

【参考方案1】：

这个怎么样：

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(),
              ]),
            ),
          ],
        ),
      ),
    );
  

首先我简化了显示背景图像的方式。 然后我使用手势检测器而不是使用任何类型的按钮。我通过将图像传递给ClipRRect 来对图像进行四舍五入，并给它适当的半径。

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

请注意，图片是随机的，每次重新加载时都会发生变化。

【讨论】：

我遇到了一个错误。未找到 MediaQuery 小部件祖先。

@mjnitro 我的错，我刚刚更新了 sn-p 以将页面与应用程序分开，以便您可以访问媒体查询。现在应该可以工作了