Flutter Custom Widgets & Animations: Полное руководство по освоению UI

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Настройка виджетов и анимаций в Flutter с примерами

Настройка виджетов и анимаций в Flutter с примерами

Усиление вашего интерфейса: настройка виджетов и анимаций в Flutter (с примерами кода)

Flutter знаменит своим подходом "все - это виджет". Хотя библиотеки виджетов Material и Cupertino очень обширны, истинная сила Flutter заключается в вашей способности создавать пользовательские виджеты и разрабатывать уникальные анимации, которые отличают ваше приложение.

Изучение настройки этих строительных блоков является важным для любого разработчика, который стремится создавать профессиональные и запоминающиеся интерфейсы пользователя (UI).

Вы можете прочитать эту полную историю, нажав здесь!!

Часть 1: Создание пользовательских виджетов (строительный блок)

Пользовательский виджет - это просто封装 одного или нескольких существующих виджетов. Это улучшает повторное использование кода reuse, читаемость, и делает ваше приложение легче поддерживать.

Пример: Переиспользуемая кнопка профиля (ProfileButton)

Вместо того, чтобы создавать Row с CircleAvatar и Text каждый раз, когда необходимо отобразить профиль, мы создаем пользовательский виджет.

Код для profile_button.dart:

import 'package:flutter/material.dart';
class ProfileButton extends StatelessWidget {
  // Пользовательские свойства, определенные в конструкторе
  final String userName;
  final String imageUrl;
  final VoidCallback onTap;
  const ProfileButton({
    Key? key,
    required this.userName,
    required this.imageUrl,
    required this.onTap,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisSize: MainAxisSize.min, 
          children: [
            CircleAvatar(
              backgroundImage: NetworkImage(imageUrl),
              radius: 20,
            ),
            const SizedBox(width: 10),
            Text(
              userName,
              style: const TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Использование в приложении (main.dart):

//... внутри метода build() виджета
ProfileButton(
  userName: 'Alice',
  imageUrl: 'https://ejemplo.com/avatar.jpg', // Замените на реальный URL
  onTap: () {
    print('Профиль Алисы нажат');
  },
),

Почему это важно?

• Повторное использование: Используйте его ProfileButton в вашей боковой панели, заголовке или где-либо еще без повторения вашего дизайнерского кода.
• Инкапсуляция: Если вы решите изменить шрифт или размер вашего аватара, вам нужно изменить только один файл (profile_button.dart).

Часть 2: Пользовательские анимации (Оживление интерфейса)

Анимации превращают статический интерфейс в динамический опыт пользователя. Flutter предлагает два типа:

1. Неявные анимации (Легкие): Они используют виджеты, такие как AnimatedContainer, AnimatedOpacity, или AnimatedSize. Просто измените свойство и виджет анимируется автоматически.
2. Явные анимации (Пользовательские): Они используют AnimationController и Tween для полного контроля над переходом. Виджет AnimatedBuilder является ключевым инструментом для этого.

Пример: Пульсирующий контейнер с AnimatedBuilder

Мы создадим контейнер, который ритмично меняет масштаб и цвет, как будто он "пульсирует" (полезно для индикаторов статуса).

codePulsingContainer (требует StatefulWidget):

import 'package:flutter/material.dart';
class PulsingContainer extends StatefulWidget {
  const PulsingContainer({super.key});
  @override
  State<PulsingContainer> createState() => _PulsingContainerState();
}
class _PulsingContainerState extends State<PulsingContainer>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;
  late Animation<Color?> _colorAnimation;
  @override
  void initState() {
    super.initState();
    // 1. Инициализируем контроллер для 1 секунды
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1000),
    )..repeat(reverse: true); // 
    // 2. Определяем анимацию масштаба (Tween)
    _scaleAnimation = Tween<double>(begin: 1.0, end: 1.15).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
    // 3. Определяем анимацию цвета (Tween)
    _colorAnimation = ColorTween(
      begin: Colors.blue.shade300,
      end: Colors.blue.shade700,
    ).animate(_controller);
  }
  @override
  Widget build(BuildContext context) {
    // 4. Используем AnimatedBuilder для перестроения только виджета
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Transform.scale(
          scale: _scaleAnimation.value,
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              color: _colorAnimation.value, // Цвет анимации
              borderRadius: BorderRadius.circular(15),
              boxShadow: [
                BoxShadow(
                  color: _colorAnimation.value!.withOpacity(0.5),
                  blurRadius: 10,
                ),
              ],
            ),
            child: child,
          ),
        );
      },
      child: const Center(
        child: Text('Пульс', style: TextStyle(color: Colors.white)),
      ),
    );
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Используйте в приложении (main.dart):

//... внутри метода build() виджета
Center(
  child: PulsingContainer(),
),

Заключение

Настройка виджетов и анимаций в Flutter не только способ улучшить ваш интерфейс; это фундаментальная практика для создания чистого кода архитектуры и доставки отличного пользовательского опыта. Освоив эти техники, вы превратите ваше приложение из простого функционального инструмента в отполированный и увлекательный цифровой продукт.