Hello FlutterFlow community,
I would like to adapt my custom widget to FlutterFlow. I'm not sure how to convert my 'imageWidgetLoader' into FlutterFlow to make it an action parameter, so that when I click, I can set the 'store media for upload' action. Any ideas on how to do this?
Here is my code:
import 'package:flutter/material.dart';
class ImageUploadOption {
Future<Widget> Function() imageWidgetLoader;
String imageName;
bool isCorrect;
ImageUploadOption({required this.imageWidgetLoader, required this.imageName, this.isCorrect = false});
}
class DynamicOptionImageWidget extends StatefulWidget {
@override
DynamicOptionImageWidgetState createState() => DynamicOptionImageWidgetState();
}
class _DynamicOptionImageWidgetState extends State<DynamicOptionImageWidget> {
List<ImageUploadOption> options = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Preguntas frecuentes'),
),
body: ListView.builder(
itemCount: options.length + 1,
itemBuilder: (context, index) {
if (index == options.length) {
return ListTile(
leading: Icon(Icons.add),
title: Text('Agregar opción'),
onTap: () {
_showAddOptionDialog();
},
);
}
return Dismissible(
key: Key(options[index].imageName),
direction: DismissDirection.endToStart,
background: Container(
color: Colors.red,
alignment: Alignment.centerRight,
padding: EdgeInsets.only(right: 20.0),
child: Icon(Icons.delete, color: Colors.white),
),
onDismissed: (direction) {
deleteOption(index);
},
child: Card(
margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
child: ExpansionTile(
leading: Icon(Icons.question_answer),
title: Text(
options[index].imageName,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: FutureBuilder(
future: options[index].imageWidgetLoader(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
snapshot.data ?? Container(),
SizedBox(height: 8.0),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
icon: Icon(Icons.edit),
onPressed: () {
_showEditOptionDialog(index);
},
),
IconButton(
icon: Icon(Icons.delete),
onPressed: () {
deleteOption(index);
},
),
],
),
],
);
}
},
),
),
],
),
),
);
},
),
);
}
Future<void> _showAddOptionDialog() async {
String imageName = '';
await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Agregar Opción'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
decoration: InputDecoration(labelText: 'Nombre de la imagen'),
onChanged: (value) {
imageName = value;
},
),
],
),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Cancelar'),
),
ElevatedButton(
onPressed: () {
if (imageName.isNotEmpty) {
addOption(() => _loadImageWidget(), imageName);
Navigator.pop(context);
} else {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Por favor ingresa el nombre de la imagen'),
),
);
}
},
child: Text('Agregar'),
),
],
);
},
);
}
Future<Widget> _loadImageWidget() async {
await Future.delayed(Duration(seconds: 2));
return Placeholder();
}
Future<void> _showEditOptionDialog(int index) async {
String newImageName = options[index].imageName;
await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Editar Opción'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
decoration: InputDecoration(labelText: 'Nombre de la imagen'),
controller: TextEditingController(text: options[index].imageName),
onChanged: (value) {
newImageName = value;
},
),
],
),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Cancelar'),
),
ElevatedButton(
onPressed: () {
if (newImageName.isNotEmpty) {
editOption(index, newImageName);
Navigator.pop(context);
} else {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Por favor ingresa el nombre de la imagen'),
),
);
}
},
child: Text('Guardar'),
),
],
);
},
);
}
void addOption(Future<Widget> Function() imageWidgetLoader, String imageName) {
setState(() {
options.add(ImageUploadOption(imageWidgetLoader: imageWidgetLoader, imageName: imageName));
});
}
void editOption(int index, String imageName) {
setState(() {
options[index].imageName = imageName;
});
}
void deleteOption(int index) {
setState(() {
options.removeAt(index);
});
}
}
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: DynamicOptionImageWidget(),
));
}