Hello everyone I hope yall good. I want to know how to create a button and when it gets pressed display an image and a column or row.
Please help me.
**NOW THE IMAGE APPEARS AND DISAPPEARS WHEN THE BUTTON IS PRESSED. But it don't refreshes to get a new one (it's a dynamic URL)
***Now the image change when it is pressed, but I don't know where I can put the button.
UPDATE CODE 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),
)
],
),
),
);
}
}
I tried to add a Container, for the purpose of reducing or increasing the image so it can fit perfectly, but it didn't work.
Also, the URL is a dynamic one, so I want to "refresh" the image display with each button hope you can help me.
Going to learn this method: Flutter: refresh network image
I have modified your code:
removed image function, instead create a variable, bool showImage which should be false initially.
When the button is pressed, showImage should be changed to true.
ElevatedButton(
onPressed: () {
setState(() {
showImage = true;
});
},
child: Text('GATIT@S')
),
The image and text should only be displayed when showImage variable is true, otherwise display empty SizedBox().
showImage
? Column(
children: [
Image.network( 'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif'),
Text('Hola')
],
)
: SizedBox(
height: 0,
),