Для чего нужен Flutter Logo?

Для чего нужен FlutterLogo?

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

Что это такое?

FlutterLogo — это виджет из пакета flutter/material.dart, который рисует фирменный логотип Flutter (синий и голубой градиент).

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Logo Demo')),
      body: Center(
        child: FlutterLogo(),
      ),
    );
  }
}

Основные параметры

FlutterLogo имеет несколько полезных свойств:

FlutterLogo(
  size: 200,           // Размер логотипа в пикселях
  duration: Duration(milliseconds: 500), // Анимация
  curve: Curves.bounceOut, // Кривая анимации
  textColor: Colors.blue,  // Цвет текста "Flutter"
)

Использование в приложениях

1. Splash Screen (экран загрузки)

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlutterLogo(size: 150),
            SizedBox(height: 20),
            Text(
              'Loading...',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            SizedBox(height: 20),
            CircularProgressIndicator(color: Colors.white),
          ],
        ),
      ),
    );
  }
}

2. Демонстрационное приложение

Когда разработчик показывает приложение, FlutterLogo сразу делает понятным, что это Flutter приложение:

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Flutter App'),
        leading: FlutterLogo(),
      ),
      body: Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}

3. Логотип в приложении с анимацией

class AnimatedFlutterLogo extends StatefulWidget {
  @override
  State<AnimatedFlutterLogo> createState() => _AnimatedFlutterLogoState();
}

class _AnimatedFlutterLogoState extends State<AnimatedFlutterLogo>
    with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 3),
      vsync: this,
    )..repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: _controller,
      child: FlutterLogo(size: 200),
    );
  }
}

4. Material Design примеры

FlutterLogo часто используется в примерах Material Design компонентов:

class ComponentShowcase extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: [
        Card(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlutterLogo(size: 100),
              SizedBox(height: 10),
              Text('Material Design'),
            ],
          ),
        ),
        // другие карточки
      ],
    );
  }
}

Параметры FlutterLogo подробнее

size

// Размеры по умолчанию
FlutterLogo()            // размер по умолчанию
FlutterLogo(size: 50)    // маленький
FlutterLogo(size: 200)   // большой
FlutterLogo(size: 500)   // очень большой

duration и curve

// Логотип появляется с анимацией
FlutterLogo(
  size: 150,
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
)

// Доступные кривые
Curves.linear
Curves.easeInOut
Curves.bounceOut
Curves.elasticOut

textColor (Material только)

FlutterLogo(
  size: 100,
  textColor: Colors.red,  // цвет текста "Flutter"
)

Где используется FlutterLogo

1. Официальные примеры Flutter

• Flutter Gallery (демо приложение)
• Примеры на flutter.dev
• Material Design примеры

2. Реальные приложения

• Брендирование (показать что это Flutter app)
• Обучение (в туториалах)
• Демонстрации
• Easter eggs в приложениях

Практический пример: Полноценный экран

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            FlutterLogo(size: 30),
            SizedBox(width: 10),
            Text('My App'),
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlutterLogo(size: 100),
            SizedBox(height: 20),
            Text(
              'Welcome to Flutter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            SizedBox(height: 10),
            Text(
              'Beautiful and fast mobile development',
              style: Theme.of(context).textTheme.bodyMedium,
            ),
            SizedBox(height: 30),
            ElevatedButton(
              onPressed: () {},
              child: Text('Get Started'),
            ),
          ],
        ),
      ),
    );
  }
}

Почему используется FlutterLogo?

1. Узнаваемость — логотип Flutter известен разработчикам
2. Брендирование — показывает, что приложение сделано на Flutter
3. Простота — встроенный виджет, не нужно искать изображение
4. Масштабируемость — работает на любой размер
5. Анимация — встроенная поддержка анимации
6. Кроссплатформенность — одинаково выглядит везде

Когда НЕ использовать FlutterLogo

• В production приложениях (для пользователя это не нужно)
• Если приложение не связано с Flutter (обучающие материалы)
• Вместо собственного логотипа компании

Варианты использования в UI

Loading indicator

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      FlutterLogo(size: 100),
      SizedBox(height: 20),
      CircularProgressIndicator(),
    ],
  ),
)

Header экрана

AppBar(
  leading: FlutterLogo(),
  title: Text('App Title'),
)

В списке компонентов

ListTile(
  leading: FlutterLogo(size: 50),
  title: Text('Flutter'),
  subtitle: Text('Cross-platform framework'),
)

Вывод

FlutterLogo — это простой, но полезный виджет для:

• Брендирования Flutter приложений
• Обучения и демонстрации
• Создания красивых UI с фирменным логотипом
• Добавления узнаваемости приложению

Хотя он не обязателен для production приложений, он полезен в демонстрационных целях и обучении. Логотип автоматически масштабируется, работает на всех платформах и поддерживает анимацию — что делает его удобным инструментом для разработчиков Flutter.