flutter transfer data (color) to create a new widget

Viewed 69

I'm creating a calendar app. The problem that I'm now facing is that I want to create a new user of the calendar. The user has the properties (which are now important) image, name and color. I created a new File For the property color, in which the color can be changed. But I don't know how I can transfer the new color in the other file, so that I can use it to create the user. I think it is possible to use the Material page route, but perhaps there is a more elegant way to handle this. Does someone have an idea to handle this in a easy way?

UserSetScreen:

import 'package:calendar_vertical/screens/users_show_screen.dart';
import 'package:calendar_vertical/widgets/color_choose.dart';
import 'package:calendar_vertical/widgets/image_input.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';


class UserSetScreen extends StatefulWidget {
  static const routeName = '/userSetScreen';

  @override
  State<UserSetScreen> createState() => _UserSetScreenState();
}

class _UserSetScreenState extends State<UserSetScreen> {
  final _titleController = TextEditingController();
  static const values = <String>[
    'Administrator',
    'normaler Nutzer',
    'eingeschränkter Nutzer'
  ];
  String selectedValue = values.first;

  void _saveValues(User user) {
    final neuerNutzer = User(
      id: DateTime.now().toString(),
      name: _titleController.text,
      color: Colors.amber,
      setAppointments: false,
      administrator: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    final colorData = Provider.of<ColorChoose>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Person hinzufügen'),
        actions: [
          IconButton(
            onPressed: () {
              Navigator.of(context).pushNamed(UsersShowScreen.routeName);
            },
            icon: Icon(Icons.people),
          ),
        ],
      ),
      body: Column(
        children: [
          Center(
            child: ImageInput(),
          ),
          Expanded(
              child: SingleChildScrollView(
            child: Padding(
              padding: EdgeInsets.all(10),
              child: Column(
                children: [
                  TextField(
                    decoration: InputDecoration(labelText: 'Name'),
                    controller: _titleController,
                  ),
                  ColorChoose(),
                  //CheckboxListTile(
                  //  value: value,
                  //  onChanged: (value) => setState(() => this.value = value!),
                  // title: Text('Administrator'),
                  //  controlAffinity: ListTileControlAffinity.leading,
                  //)
                ],
              ),
            ),
          ))
        ],
      ),
    );
  }

ColorChoose:

import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';

class ColorChoose extends StatefulWidget {


  @override
  State<ColorChoose> createState() => _ColorChooseState();
}

class _ColorChooseState extends State<ColorChoose> {
  Color currentColor = Colors.white;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text('Farbe: '),
        Container(
          decoration: BoxDecoration(
            color: currentColor,
            borderRadius: BorderRadius.all(
              Radius.circular(15),
            ),
          ),
          padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
          margin: EdgeInsets.only(left: 10.0),
        ),
        Spacer(),
        ElevatedButton(
          onPressed: () => _showColorPicker(context),
          child: Text(
            'Farbe ändern',
          ),
        ),
      ],
    );
  }

  void _showColorPicker(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Farbe wählen'),
        titlePadding: const EdgeInsets.all(0.0),
        contentPadding: const EdgeInsets.all(0.0),
        content: SingleChildScrollView(
          child: Wrap(
            children: [
              Container(
                width: 300,
                height: 300,
                child: BlockPicker(
                  pickerColor: currentColor,
                  onColorChanged: (color) => setState(
                    () => this.currentColor = color,
                  ),
                ),
              )
              
            ],
          ),
        ),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text('Close'),
          )
        ],
      ),
    );
  }
}

Thank you very much.

Best regards Patrick

1 Answers

I guess the best variant is to use GetX or another state manager. Another way - to choose color right from the user screen, showing a dialog. Finally you can pass valuenotifier to your color ColorChoose widget.

Related