Эффект зума фона нижнего листа в Flutter

Вопрос или проблема

Ответ или решение

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

Шаг 1: Создание основного приложения

Создайте новое приложение Flutter и добавьте необходимые зависимости в pubspec.yaml, если это не было сделано ранее.

dependencies:
  flutter:
    sdk: flutter

Шаг 2: Импортирование нужных библиотек

Импортируйте необходимые библиотеки в вашем файле Dart:

import 'package:flutter/material.dart';

Шаг 3: Реализация зумирования фона

Создайте новый StatefulWidget, который будет содержать Bottom Sheet и логику зумирования. В этом примере мы используем AnimatedContainer для плавного изменения размера фона.

class ZoomingBottomSheet extends StatefulWidget {
  @override
  _ZoomingBottomSheetState createState() => _ZoomingBottomSheetState();
}

class _ZoomingBottomSheetState extends State<ZoomingBottomSheet> with SingleTickerProviderStateMixin {
  bool _isExpanded = false;
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
    );

    _animation = Tween<double>(begin: 1.0, end: 1.2).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
  }

  void _toggleBottomSheet() {
    if (_isExpanded) {
      _controller.reverse();
    } else {
      _controller.forward();
    }

    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Zooming Bottom Sheet')),
      body: Stack(
        children: [
          GestureDetector(
            onTap: _toggleBottomSheet,
            child: AnimatedBuilder(
              animation: _animation,
              builder: (context, child) {
                return Container(
                  color: Colors.blueGrey,
                  child: Transform.scale(
                    scale: _animation.value,
                    child: Center(child: Text('Tap to Zoom In/Out', style: TextStyle(color: Colors.white, fontSize: 20))),
                  ),
                );
              },
            ),
          ),
          if (_isExpanded)
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    ListTile(
                      title: Text('Item 1'),
                      onTap: () {},
                    ),
                    ListTile(
                      title: Text('Item 2'),
                      onTap: () {},
                    ),
                    ListTile(
                      title: Text('Close'),
                      onTap: _toggleBottomSheet,
                    ),
                  ],
                ),
              ),
            ),
        ],
      ),
    );
  }

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

Шаг 4: Запуск приложения

Теперь вы можете запустить ваше приложение и протестировать эффект. При нажатии на область с текстом "Tap to Zoom In/Out" фон будет зумироваться, а нижний лист будет открываться или закрываться.

Заключение

Этот пример демонстрирует, как создать эффект зумирования фона для нижнего листа в Flutter. Вы можете настраивать анимацию, цвета, размеры и содержимое нижнего листа по вашим требованиям. Успехов в разработке!