颤动按钮在其上方显示图像

Question

大家好，希望你们一切顺利。我想知道如何创建一个按钮，当它被按下时显示一个图像和一列或一行。

请帮帮我

**现在图像会在按下按钮时出现和消失。但是它不会刷新以获取新的（它是动态的url）

***现在按下时图像会改变，但我不知道该把按钮放在哪里。

更新代码 5.0

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'colors.dart';

const String url = 'http://thecatapi.com/api/images/get?format=src&type=gif';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme:
            ThemeData(primarySwatch: primaryBlack, accentColor: Colors.white),
        debugShowCheckedModeBanner: false,
        home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late Uint8List bytes;
  bool loading = true;

  @override
  void didChangeDependencies() async {
    getBytes();
    super.didChangeDependencies();
  }

  void getBytes() async {
    setState(() {
      loading = true;
    });

    Uint8List newbytes = (await NetworkAssetBundle(Uri.parse(url)).load(url))
        .buffer
        .asUint8List();

    setState(() {
      bytes = newbytes;
      loading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              ':(:',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            Text('FelizTriste'),
            Text(':(:', style: TextStyle(fontWeight: FontWeight.bold)),
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            loading
                ? const SizedBox(
                    width: 355,
                    height: 355,
                    child: Center(child: CircularProgressIndicator()))
                : Container(
                    decoration: BoxDecoration(
                        border: Border.all(color: primaryBlack, width: 6)),
                    child: Image.memory(
                      bytes,
                      width: 350,
                      height: 350,
                      fit: BoxFit.cover,
                    ),
                  ),
            SizedBox(
              height: 60,
            ),
            ElevatedButton(onPressed: getBytes, child: const Text('GATIT@S')),
            const Text(
              '¿Quieres ver gatit@s?',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
    );
  }
}

我尝试添加一个容器，目的是缩小或增加图像以使其完美适合，但我没有成功。

另外，url它是一个动态的，所以我想用每个按钮“刷新”图像显示，希望你能帮助我。

打算学习这个方法：

Answer 1

我修改了你的代码：

删除了图像函数，而是创建一个变量 bool showImage，它最初应该是 false。

按下按钮时，showImage 应更改为 true。

 ElevatedButton(
   onPressed: () {
     setState(() {
       showImage = true;
     });
   },
   child: Text('GATIT@S')
),

showImage变量为真时才显示图片和文字，否则显示空的SizedBox()。

 showImage
   ? Column(
       children: [
         Image.network(           'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif'),
         Text('Hola')
       ],
     )
   : SizedBox(
       height: 0,
     ),

颤动按钮在其上方显示图像

Flutter button to display image above it

android

flutter

image

flutter-android

flutter-image