¿Cómo puedo mostrar la Imagen A en la pantalla del usuario si es falsa o la Imagen B si es verdadera? La Imagen A es la primera que aparece, cuando el usuario hace clic en ella, el estado cambia a verdadero y cambia a Imagen. B, y cambia una vez que el usuario hace clic en él, el estado cambia a verdadero o falso.
Imagen A = falsa
Imagen B = verdadera
Imagen A - Imagen B
class _MyAppState extends State<MyApp> {
bool closedImage = false;
bool openImage = true;
bool switchOn = false;
void _onSwitchChanged(bool value) {
setState(() {
switchOn = false;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(scaffoldBackgroundColor: Colors.white),
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
),
body:
Center(
child: InkWell(
onTap: () {
Switch(
onChanged: _onSwitchChanged,
value: switchOn,
);
},
child: Container(
color: Colors.white,
child: ClipRRect(
child: switchOn ? Image.asset('lib/assets/closed.png') : Image.asset('lib/assets/open.png')
)
),
),
)
),
);
}
}
------------------------------------
Simplemente active la variable switchOn de esta manera:
void _onSwitchChanged(bool value) {
setState(() {
switchOn = !switchOn;
});
}
0
------------------------------------
Creo que su método _onSwitchChanged necesita usar el argumento de valor bool entrante (que proporciona el Switch).
Aquí hay un ejemplo similar que muestra el uso típico:
import 'package:flutter/material.dart';
class SwitchFieldPage extends StatefulWidget {
@override
_SwitchFieldPageState createState() => _SwitchFieldPageState();
}
class _SwitchFieldPageState extends State<SwitchFieldPage> {
bool switchVal = false;
String monkey = 'A';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Switch Field'),
),
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Monkey $monkey'),
Switch(
onChanged: (val) { // ← remember to use val (bool)
print('Switch value: $val');
setState(() {
switchVal = val; // this sets the Switch setting on/off
monkey = val ? 'B' : 'A'; // change your monkey source
});
},
value: switchVal,
)
],
),
),
),
);
}
}
2
Oye, ¿puedes ayudarme? He estado intentando durante 3 horas resolver este problema y hasta ahora no lo he logrado, ¿puedo subirlo a Github para que me ayudes? Es un proyecto para mi portafolio como Front-end, gracias.
- Germano Lira
28 de marzo de 2021 a las 4:01
Probé tu solución, funcionó, pero quería usar onTap en lugar de Switch, para evitar mostrar un botón
- Germano Lira
28 de marzo de 2021 a las 4:02
------------------------------------
Puedes utilizar GestureDetector o InkWell para detectar cuándo el usuario presiona la imagen. Para actualizar la imagen, sugeriría aprender a administrar el estado. Para simplificar esto por ahora, usaremos StreamBuilder.
pantalla.dart:
final ScreenBloc _screenBloc = ScreenBloc();
// This is inside your widget build
StreamBuilder<AuthState>(
stream: _screenBloc.pic,
initialData: false,
builder: (context, snapshot) {
return GestureDetector(
onTap: ()=> _screenBloc.toggle(),
child: snapshot.data?Image.asset('lib/assets/closed.png') : Image.asset('lib/assets/open.png'),
);
},
)
screen_bloc.dart:
class ScreenBloc{
bool _currentState=false;
StreamController<bool> _picStream = StreamController<bool>();
Stream<bool> get pic => _picStream.stream;
void toggle(){
_currentState=!_currentState;
_picStream.add(_currentState);
}
}
1
1
Gracias, intentaré implementar y estudiar la gestión estatal
- Germano Lira
28 de marzo de 2021 a las 4:37
