dartpad-rozvrh-detail

main.dart

import 'package:flutter/foundation.dart';

/// detail casovy usek
///
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
//      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () {}
              // onPressed:() => Navigator.pop(context, false)
              ),
          title: Text("Časový úsek"),
          actions: <Widget>[
            IconButton(icon: Icon(Icons.delete_forever), onPressed: () {}),
          ],
        ),
        body: SingleChildScrollView(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String _name = "Vstávat a cvičit";
  IconData _selectedIcon = Icons.style;
  int _minutesStart = 0;
  int _minutesEnd = 1440;
  int _daysApplied = 127;
  String _screentimeCategory = "OFF";
  String jsonText;
  final jsonController = TextEditingController();

  initState() {
    super.initState();
    updateJsonText();
  }

  updateJsonText() {
    jsonText = '''
    {
      "name": "$_name",
      "icon": "${_selectedIcon.codePoint}",
      "start": $_minutesStart,
      "end": $_minutesEnd,
      "daysApplied": $_daysApplied,
      "screentimeCategory": "$_screentimeCategory"
    }''';
    jsonController.text = jsonText;
  }

  @override
  void dispose() {
    // Clean up the controller when the widget is removed from the
    // widget tree.
    jsonController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(24.0),
      child: Column(
        //mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
              "Během tohoto časového úseku budou nastavená pravidla na aplikace podle níže vybraného režimu."),
          TextFormField(
              initialValue: _name,
              onChanged: (text) => {
                    setState(() {
                      _name = text;
                      updateJsonText();
                    })
                  },
              style: Theme.of(context).textTheme.headline6,
              decoration: InputDecoration(
                labelText: "Název časového úseku",
              )),
          SizedBox(height: 16),
          ScreenTimeTypeIconSelector(
            onChanged: (iconData) => {
              setState(() {
                _selectedIcon = iconData;
                updateJsonText();
              })
            },
          ),
          SizedBox(height: 32),
          TimeSpanSelector(
            onChanged: (start, end) => {
              setState(() {
                _minutesStart = start;
                _minutesEnd = end;
                updateJsonText();
              })
            },
          ),
          SizedBox(height: 32),
          Text("Platné pro dny", style: Theme.of(context).textTheme.headline6),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: WeekDaySelector(
              onChanged: (daysApplied) => {
                setState(() {
                  _daysApplied = daysApplied;
                  updateJsonText();
                })
              },
            ),
          ),
          Text("Režim digičasu", style: Theme.of(context).textTheme.headline6),
          ScreenTimeTypeSelector(
              onChanged: (String code) => {
                    setState(() {
                      _screentimeCategory = code;
                      updateJsonText();
                    })
                  }),
          SizedBox(height: 16),
//           Center(
//             child: RaisedButton(
//               child: Text("Přidat časový úsek"),
//               onPressed: () {},
//             ),
//           ),
          Divider(),
          Text("JSON konfigurace",
              style: Theme.of(context).textTheme.headline6),
          Card(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  TextField(
                    keyboardType: TextInputType.multiline,
                    maxLines: null,
                    controller: jsonController,
//                 readOnly: true,
//                 initialValue: jsonText,
                  ),
                  FlatButton.icon(
                    icon: Icon(Icons.content_copy),
                    label: Text("Zkopírovat"),
                    onPressed: () {
                      Clipboard.setData(ClipboardData(text: jsonText))
                          .then((_) {
                        Scaffold.of(context).showSnackBar(
                            SnackBar(content: Text("Zkopírováno")));
                      });
                    },
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

/// Widget to select the icon using ChoiceCip
class ScreenTimeTypeIconSelector extends StatefulWidget {
  final Function(IconData) onChanged;

  const ScreenTimeTypeIconSelector({Key key, this.onChanged}) : super(key: key);

  @override
  State createState() => ScreenTimeTypeIconSelectorState();
}

class ScreenTimeTypeIconSelectorState
    extends State<ScreenTimeTypeIconSelector> {
  int _selectedIconIndex;

  initState() {
    super.initState();
    _selectedIconIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    const List<IconData> iconsList = [
      Icons.style,
      Icons.hotel,
      Icons.wb_sunny,
      Icons.school,
      Icons.nature_people,
      Icons.brightness_3,
      Icons.restaurant,
      Icons.screen_lock_landscape,
      Icons.snooze,
    ];

    return Wrap(
        spacing: 8,
        children: List<Widget>.generate(iconsList.length, (int index) {
          return ChoiceChip(
              label: Icon(iconsList[index]),
              selected: _selectedIconIndex == index,
              onSelected: (bool selected) {
                setState(() {
                  // _selectedIconIndex = selected ? index : null;
                  _selectedIconIndex = index;
                  widget.onChanged(iconsList[index]);
                });
              });
        }));
  }
}

/// Widget to select the screentime timespan using RangeSlider
class TimeSpanSelector extends StatefulWidget {
  final Function(int start, int end) onChanged;

  const TimeSpanSelector({Key key, this.onChanged}) : super(key: key);

  @override
  State createState() => TimeSpanSelectorState();
}

class TimeSpanSelectorState extends State<TimeSpanSelector> {
  RangeValues _values;

  initState() {
    super.initState();
    _values = RangeValues(0, 1440);
  }

  static String minutesToDayTime(double minutes) {
    int _hours = (minutes.floor() / 60).floor();
    int _minutes = minutes.floor() % 60;
    String _zminutes = _minutes == 0 ? "00" : _minutes.toString();
    return "$_hours:$_zminutes";
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text("Od - do", style: Theme.of(context).textTheme.headline6),
            Spacer(),
            Chip(label: Text(minutesToDayTime(_values.start))),
            Text(" - "),
            Chip(label: Text(minutesToDayTime(_values.end))),
          ],
        ),
        RangeSlider(
            values: _values,
            min: 0,
            max: 1440,
            // 24 hours * 60 minutes
            divisions: 96,
            onChanged: (RangeValues newValues) {
              setState(() {
                if (newValues.end - newValues.start >= 15) {
                  _values = newValues;
                } else {
                  if (_values.start == newValues.start) {
                    _values = RangeValues(_values.start, _values.start + 15);
                  } else {
                    _values = RangeValues(_values.end - 15, _values.end);
                  }
                }
                widget.onChanged(_values.start.toInt(), _values.end.toInt());
              });
            }),
      ],
    );
  }
}

class ScreenTimeCategory {
  final String code;
  final String label;
  final String description;

  ScreenTimeCategory(this.code, this.label, this.description);

  @override
  String toString() {
    return code;
  }
}

final List<ScreenTimeCategory> screenTimeCategories = [
  ScreenTimeCategory(
      "OFF",
      "Vypnuto",
      "Někdy má být telefon vypnutý. V tomto režimu nejde spustit nic kromě rodičovského přístupu. "
          "Pokud pro nějakou hodinu ve dne není vybrán jiný režim, uplatní se tento."),
  ScreenTimeCategory(
    "BASIC",
    "Základ",
    "Základní digičas je nejvíce restriktivní. "
        "Jde o čas, kdy dítě již svoji dávku koukání do obrazovky vyčerpalo. "
        "Nicméně i tehdy potřebujeme povolit některé aplikace, "
        "které slouží pro komunikaci s námi s rodiči - např. Telefon."
        "\n\n"
        "Omezení: Kdy lze vůbec pouštět telefon.",
  ),
  ScreenTimeCategory(
    "EDU",
    "Procvičování",
    "Digičas na procvičování. "
        "Jde o primární čas pro školní procvičování, tedy s obsahem úloh, "
        "který chceme v rámci EduKids mít dispozici a který pomůže dětem lépe "
        "zvládnout školní látku (na což již běžně ve dni není prostor)."
        "\n\n"
        "Omezení: Dle výběru od - do a celkovým digičasem pro den.",
  ),
  ScreenTimeCategory(
    "CREATE",
    "Tvoření",
    "Digičas pro tvořivé činnosti. Jedná se většinou o čas pro tvořící aplikace. "
        "Nicméně takové, které neprocvičují relevantní školní tématiku a nebo "
        "mají v sobě 'relaxační' režim, do kterého dítě rádo 'uteče'. "
        "Využití tohoto digičasu lze podmínit nastavením."
        "\n\n"
        "Omezení: Dle výběru od - do, celkovým digičasem pro den a minimálním počtem získaných časozlaťáků.",
  ),
  ScreenTimeCategory(
    "GROWTH",
    "Rozvojové hry",
    "Digičas pro hry a aplikace, které pozitivně rozvíjí (např. Tetris). "
        "Nicméně takové, které neprocvičují relevantní školní tématiku a nebo "
        "mají v sobě 'relaxační' režim, do kterého dítě rádo 'uteče'. "
        "Využití tohoto digičasu lze podmínit nastavením."
        "\n\n"
        "Omezení: Dle výběru od - do, celkovým digičasem pro den a minimálním počtem získaných časozlaťáků.",
  ),
  ScreenTimeCategory(
    "CONSUME",
    "Konzum",
    'Během konzumního digičasu dítě pasivně konzumuje obsah na obrazovce a '
        'v podstatě jen "zabíjí čas". Jde např. o pouštění různých pohádek, '
        'Youtube kids, planého chatování na Whatsappu apod. Běh těchto aplikací '
        'většinou chtějí rodiče podmínit. Proto si dítě bude na tento čas '
        '"vydělávat časozlaťáky" - tím, že bude plnit vzdělávací úkoly. Počet '
        'získavaných minut (časozlaťáků) '
        'pro použití na konzumní aplikace se bude odvíjet podle rodičem nastavené '
        '"vzdělávací intenzity".'
        "\n\n"
        "Omezení: Dle výběru od - do, celkovým digičasem pro den, minimálním počtem získaných časozlaťáků, časozlaťáky jsou spotřebovávané.",
  ),
];

/// Widget to select the screentime type using FilterChips
class ScreenTimeTypeSelector extends StatefulWidget {
  final Function(String code) onChanged;

  const ScreenTimeTypeSelector({Key key, this.onChanged}) : super(key: key);

  @override
  State createState() => ScreenTimeTypeSelectorState();
}

class ScreenTimeTypeSelectorState extends State<ScreenTimeTypeSelector> {
  /// screentime level: 0..off, 1..basic, 2..edu, 3..create, 4..growth, 5..consume
  int _screenTimeTypeLevel;

  initState() {
    super.initState();
    _screenTimeTypeLevel = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Wrap(
          spacing: 8,
          runSpacing: 2,
          children: List.generate(screenTimeCategories.length, (index) {
            bool _isSelected = false;
            if (index == 0) {
              _isSelected = _screenTimeTypeLevel == 0;
            } else {
              _isSelected = index <= _screenTimeTypeLevel;
            }
            return ChoiceChip(
              shape: BeveledRectangleBorder(
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(8))),
              label: Text(screenTimeCategories[index].label),
              // showCheckmark: true,
              selected: _isSelected,
              onSelected: (bool value) {
                setState(() {
                  _screenTimeTypeLevel = index;
                  widget.onChanged(
                      screenTimeCategories[_screenTimeTypeLevel].code);
                });
              },
            );
          }),
        ),
        Card(

            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: SelectableText(
                  screenTimeCategories[_screenTimeTypeLevel].description),
            )),
      ],
    );
  }
}

/// Widget to select the days (Monday to Sunday) using FilterChips
class WeekDaySelector extends StatefulWidget {
  final Function(int) onChanged;

  const WeekDaySelector({Key key, this.onChanged}) : super(key: key);

  @override
  State createState() => WeekDaySelectorState();
}

class WeekDaySelectorState extends State<WeekDaySelector> {
  int _daysMap;

  initState() {
    super.initState();
    _daysMap = 0x01;
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8,
      runSpacing: 2,
      children: List<Widget>.generate(7, (int index) {
        bool _dayIsSelected = _daysMap & [1, 2, 4, 8, 16, 32, 64][index] > 0;
        return FilterChip(
          label: Text(["Po", "Út", "St", "Čt", "Pá", "So", "Ne"][index]),
          selected: _dayIsSelected,
          onSelected: (bool value) {
            setState(() {
              _daysMap = value
                  ? _daysMap | [1, 2, 4, 8, 16, 32, 64][index]
                  : _daysMap &
                      [0x7E, 0x7D, 0x7B, 0x77, 0x6F, 0x5F, 0x3F][index];
              widget.onChanged(_daysMap);
            });
          },
        );
      }),
    );
  }
}