Как создать список чекбоксов с помощью CheckboxListTile

Привет, подписчики! 👋 Сегодня мы рассмотрим, как легко создать список чекбоксов в вашем Flutter-приложении, используя виджет CheckboxListTile. 📝

Преимущества CheckboxListTile:
- Упрощает создание списков с чекбоксами
- Позволяет легко управлять состоянием выбранных элементов
- Поддерживает стандартный стиль Material Design

Пример кода:

class SkillsFilterList extends StatelessWidget {
  final SkillsFilter skillsFilter;
  final Function() onChanged;

  const SkillsFilterList({
    Key? key,
    required this.skillsFilter,
    required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      shrinkWrap: true,
      physics: const BouncingScrollPhysics(),
      itemCount: skillsFilter.value.length,
      separatorBuilder: (context, index) => const SizedBox.shrink(),
      itemBuilder: (context, index) {
        final skill = this.skillsFilter.value[index];
        return ListTileTheme(
          contentPadding: EdgeInsets.all(0),
          child: CheckboxListTile(
            dense: true,
            title: Text(skill.scopeName),
            value: skill.chosed,
            onChanged: (skill) {
              skillsFilter.select(skill);
              onChanged();
            },
          ),
        );
      },
    );
  }
}

Ключевые моменты:
✦ ListView.separated используется для создания списка с разделителями
✦ CheckboxListTile упрощает создание элемента списка с чекбоксом и текстом
✦ Свойство onChanged обрабатывает изменения состояния чекбокса

Оцените эту рубрику и напишите в комментариях, какие темы вы хотели бы видеть в будущих выпусках! 💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #UIUX #FlutterTips #AppDevelopment #CodingTips

Самые лучшие обновлённые пакеты за последние 24 часа

google_maps_flutter_web 0.5.13 - плагин для интеграции Google Maps в веб-приложения Flutter. Обновлена минимальная поддерживаемая версия SDK до Flutter 3.29/Dart 3.7, исправлена проблема с consumeTapEvents для кругов, полигонов и полилиний на веб-платформе.
👍 Лайки: 236, 📥 Скачиваний: 397К
https://pub.dev/packages/google_maps_flutter_web

dwds 25.0.2 - позволяет инструментам разработчика работать с веб-приложениями Dart. Исправлена ошибка инициализации, если у DWDS уже есть существующие клиенты.
👍 Лайки: 30, 📥 Скачиваний: 4.1М
https://pub.dev/packages/dwds

flutter_slidable 4.0.1 - используется для создания слайдящихся элементов списка. Исправлена проблема с auto_close_behavior, где не вызывался removeStatusListener.
👍 Лайки: 5940, 📥 Скачиваний: 504К
https://pub.dev/packages/flutter_slidable

map_launcher 4.4.0 - позволяет найти доступные карты на устройстве и запустить их с меткой или показать направления. Теперь поддерживается карта Neshan.
👍 Лайки: 920, 📥 Скачиваний: 163К
https://pub.dev/packages/map_launcher

icons_launcher 3.0.2 - упрощает задачу обновления иконки запуска приложения Flutter. Теперь поддерживает все основные платформы и добавлена поддержка вкусов для macOS.
👍 Лайки: 934, 📥 Скачиваний: 344К
https://pub.dev/packages/icons_launcher

dart_frog 1.2.3 - теперь с стандартизированными опциями анализа и возможностью доступа к захваченным параметрам запроса.
👍 Лайки: 802, 📥 Скачиваний: 22.3К
https://pub.dev/packages/dart_frog

#Flutter #Dart #PubDev #FlutterPulse #FlutterPulseBestPackages #google_maps_flutter_web #dwds #flutter_slidable #map_launcher #icons_launcher #dart_frog

Кнопка с градиентом и анимацией

Привет, подписчики! 👋 Сегодня мы рассмотрим интересный пример создания анимированной кнопки с градиентным фоном во Flutter. 📱✨

Основная идея:
Мы создадим кнопку, у которой при нажатии будет изменяться градиентный фон с анимацией. Для этого мы используем AnimatedGradientButton, который будет обрабатывать анимацию.

Код примера:

class AnimatedGradientButton extends StatefulWidget {
  final Text? label;
  final Gradient gradient;
  final Gradient onPushGradient;
  final Icon? icon;
  final Function()? onPressed;

  AnimatedGradientButton({
    this.label,
    required this.gradient,
    required this.onPushGradient,
    this.icon,
    this.onPressed,
  });

  @override
  _AnimatedGradientButtonState createState() => _AnimatedGradientButtonState();
}

class _AnimatedGradientButtonState extends State<AnimatedGradientButton>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 1000),
      vsync: this,
    );
    _animation = CurvedAnimation(curve: Curves.decelerate, parent: _controller);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(24),
            gradient: LinearGradient(
              colors: widget.gradient.colors.map((color) => Color.lerp(
                color,
                widget.onPushGradient.colors[widget.gradient.colors.indexOf(color)],
                _animation.value,
              )).toList(),
            ),
          ),
          child: MaterialButton(
            onPressed: () {
              _controller.forward();
              widget.onPressed?.call();
              _controller.reverse();
            },
            child: widget.label,
          ),
        );
      },
    );
  }
}

Как это работает:
1. Мы оборачиваем MaterialButton в контейнер с градиентным фоном.
2. При нажатии на кнопку запускается анимация, которая изменяет градиент от исходного к целевому.
3. Color.lerp используется для плавного перехода между цветами градиента.

Перспективы:
- Можно создать собственный объект рендеринга.
- Полностью переработать кнопку без использования MaterialButton.
- Расширить ButtonStyleButton как обычные кнопки.

Оцените новую рубрику и напишите в комментариях, что хотели бы увидеть дальше! 👍 Оцените пост и подпишитесь 😉

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #UIUX #Animation #FlutterTips #DartLang #GradientButton #AnimatedButton