How to receive "Icon" and "Color" values from a TextFormField in Flutter?

Question

I'm trying to create a Formulary where I want to create a new object from it, but I need to get non-string values from the TextFormfield. I want that when I type, for example, "Colors.red" at the "color" textField, and "Icons.save" at the " icon" textField and submit the formulary, the _submitForm function create a new object that gets that color and icon I typed at the textfields as parameter, like this:

Satisfacao( id: 's1', title: 'Muito Boa', color: Colors.red, icon: Icons.save, count: 0, )

I tried this way but it's not working:

import 'package:flutter/material.dart';

class Satisfacao with ChangeNotifier {
  final String id;
  final String title;
  final Color color;
  final IconData icon;
  int count;

  Satisfacao({
    required this.id,
    required this.title,
    this.color = Colors.orange,
    required this.icon,
    this.count = 0,
  });
}

import 'dart:ffi';

import 'package:apetit_project/models/satisfacao.dart';
import 'package:flutter/material.dart';

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

  @override
  State<SatisfactionFormScreen> createState() => _SatisfactionFormScreenState();
}

class _SatisfactionFormScreenState extends State<SatisfactionFormScreen> {
  final _titleFocus = FocusNode();
  final _colorFocus = FocusNode();
  final _iconFocus = FocusNode();

  final _formKey = GlobalKey<FormState>();
  final _formData = Map<String, Object>();

  @override
  void dispose() {
    super.dispose();
    _titleFocus.dispose();
  }

  void _submitForm() {
    _formKey.currentState?.save();
    final newSatisfacao = Satisfacao(
      id: _formData['id'] as String,
      title: _formData['title'] as String,
      color: _formData['color'] as Color,
      icon: _formData['icon'] as IconData,
    );

    print(newSatisfacao.id);
    print(newSatisfacao.title);
    print(newSatisfacao.color);
    print(newSatisfacao.icon);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Formulário de Satisfação'),
        actions: [
          IconButton(
            onPressed: _submitForm,
            icon: Icon(Icons.save),
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(15),
        child: Form(
            key: _formKey,
            child: ListView(
              children: [
                TextFormField(
                  decoration: const InputDecoration(labelText: 'Id'),
                  textInputAction: TextInputAction.next,
                  onFieldSubmitted: (_) {
                    FocusScope.of(context).requestFocus(_titleFocus);
                  },
                  onSaved: (id) => _formData['id'] = id ?? '',
                ),
                TextFormField(
                  decoration: const InputDecoration(labelText: 'Title'),
                  textInputAction: TextInputAction.next,
                  focusNode: _titleFocus,
                  onFieldSubmitted: (_) {
                    FocusScope.of(context).requestFocus(_colorFocus);
                  },
                  onSaved: (title) => _formData['$title'] = title ?? '',
                ),
                TextFormField(
                  decoration: const InputDecoration(labelText: 'Color'),
                  textInputAction: TextInputAction.next,
                  focusNode: _colorFocus,
                  onFieldSubmitted: (_) {
                    FocusScope.of(context).requestFocus(_iconFocus);
                  },
                  onSaved: (color) =>
                      _formData['color'] = color ?? Colors.green,
                ),
                TextFormField(
                  decoration: const InputDecoration(labelText: 'Icon'),
                  textInputAction: TextInputAction.done,
                  focusNode: _iconFocus,
                  onFieldSubmitted: (_) => _submitForm(),
                  onSaved: (icon) => _formData['icon'] = icon ?? Icons.save,
                ),
              ],
            )),
      ),
    );
  }
}

How can I do it so my application understands that it needs to get Icon and Color itens?

Answer 1

You can get data from string for icon and color if the values are like this

For Colors #FFFFFF and for icons 0xe535

You cannot get the icon and color using a string like Colors.red or Icons.add unless you create a map of the same..

Map<String, IconData> iconsMap = {
   'save': Icons.save,
   'add': Icons.add
};

//same for the color also

Map<String, Color> colorMap = {
 'Colors.red' : Colors.red,
 'Colors.green' : Colors.green,
}

Now to get the value just use

Color chosenColor = colorMap['Colors.green'];

This will give you the green color. But please note that you will be restricted to use only the colors and icons defined in the map.