🔥 Liquid Glass Renderer — эффект «жидкого стекла» теперь и во Flutter!

Новый пакет liquid_glass_renderer позволяет Flutter-разработчикам воссоздать визуальный стиль, вдохновлённый новым языком дизайна Apple — Liquid Glass, представленным на WWDC 2025 вместе с iOS 26, macOS Tahoe и другими платформами.

Что такое Liquid Glass?

Liquid Glass — это современный визуальный стиль с эффектами стеклянности, динамической прозрачности, глубины и плавного взаимодействия слоёв. Его основа — реалистичное поведение света и стекла в интерфейсах.

Теперь и во Flutter:

🧊 Эффект жидкого стекла: просто оберни любой виджет в LiquidGlass
🧬 Слои, которые сливаются между собой как настоящая жидкость
🎨 Гибкая настройка — толщина, цвет, освещение, блики, размытие
⚡️ Высокая производительность благодаря поддержке Impeller и шейдерам

Пример:

LiquidGlass(
  shape: LiquidRoundedSuperellipse(
    borderRadius: Radius.circular(50),
  ),
  child: const SizedBox(
    height: 200,
    width: 200,
    child: Center(child: FlutterLogo(size: 100)),
  ),
)

Важно:

Работает только на Impeller (поддержка Web, Windows, Linux — пока нет)

Поддерживается до 3 стеклянных фигур в одном LiquidGlassLayer

Установка:

flutter pub add liquid_glass_renderer

Импорт:

import 'package:liquid_glass_renderer/liquid_glass_renderer.dart';

Оцените эффект Liquid Glass сами — теперь вы можете создавать интерфейсы нового уровня прямо во Flutter!

#flutter #dart #liquidglass #design #WWDC2025 #FlutterUI #FlutterEffects #MobileDev #AppDesign #flutterpulse

Что такое Render Objects?

Render Objects являются основой визуальной системы Flutter. Они используются для отрисовки элементов интерфейса на экране.

Flutter строит пользовательские интерфейсы в три слоя:
1. Widget: конфигурация визуального элемента
2. Element: соединяет виджеты и объекты рендеринга
3. RenderObject: рисует на вашем экране

Настройка RenderObject
Поскольку мы будем рендерить одного потомка, мы расширяем SingleChildRenderObjectWidget.

Render Objects рисуют как CustomPainter, но с гораздо большими возможностями:
- Могут иметь потомков и реагировать на ограничения макета
- Управляют как макетом, так и отрисовкой
- Обрабатывают ограничения макета
- Управляют своим собственным размером

Зачем использовать RenderObject?
Большую часть времени вам не придётся писать RenderObjects самостоятельно. Используйте виджеты!
Но пользовательские RenderObjects дают неограниченную творческую свободу для нестандартных виджетов.

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: CustomStar(
          size: 200,
          color: Colors.amber,
        ),
      ),
    );
  }
}

class CustomStar extends SingleChildRenderObjectWidget {
  final double size;
  final Color color;

  const CustomStar({
    super.key,
    required this.size,
    required this.color,
  });

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderCustomStar(size: size, color: color);
  }

  @override
  void updateRenderObject(BuildContext context, RenderCustomStar renderObject) {
    renderObject.starSize = size;
    renderObject.color = color;
  }
}

class RenderCustomStar extends RenderBox {
  RenderCustomStar({
    required double size,
    required Color color,
  })  : starSize = size,
        color = color;

  double starSize;
  Color color;

  @override
  void performLayout() {
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final canvas = context.canvas;
    canvas.save();
    canvas.translate(offset.dx, offset.dy);
    // ... рисуйте то, что вам нужно здесь
  }
}

Оцените новую рубрику лайком! 👍
Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #mobiledev #renderobjects #flutterrenderobjects #flutterui #flutterdevelopment #codingtips