Кроссплатформенный разработчик Flutter(Начальный уровень)

Билет №1

Теоретическая часть:

1. Что такое Flutter и какие платформы он поддерживает? 

2. В чём разница между StatelessWidget и StatefulWidget?

Ответ:

Flutter — это кроссплатформенный фреймворк от Google, позволяющий создавать приложения для Android, iOS, веба и десктопа с помощью одного кода на языке Dart. StatelessWidget не имеет внутреннего состояния и используется для статичных виджетов, тогда как StatefulWidget содержит объект State и позволяет обновлять UI при изменении данных.

Практическая часть:

Создайте простое приложение, которое отображает текст "Привет, Flutter!" по центру экрана.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Моё первое приложение')),
        body: Center(
          child: Text('Привет, Flutter!'),
        ),
      ),
    );
  }
}

Билет №2

Теоретическая часть:

1. Какие основные способы расположения элементов интерфейса вы знаете? 

2. Охарактеризуйте понятие контекста (BuildContext) в Flutter.

Ответ:

Основные виджеты для расположения элементов: Row, Column, Stack, Container, Expanded, Flexible, Wrap и другие. BuildContext — это ссылка на место виджета в дереве, необходимая для доступа к данным, темам, навигации и другим элементам из дерева виджетов.

Практическая часть:

Реализуйте макет с двумя кнопками, расположенными горизонтально и занимающими равное пространство.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Горизонтальные кнопки')),
        body: Row(
          children: [
            Expanded(
              child: ElevatedButton(
                onPressed: () {},
                child: Text('Кнопка 1'),
              ),
            ),
            SizedBox(width: 8),
            Expanded(
              child: ElevatedButton(
                onPressed: () {},
                child: Text('Кнопка 2'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Билет №3

Теоретическая часть: 

1. Объясните, что такое Future и как он используется в Dart. 

2. Что такое async/await и зачем они нужны?

Ответ: 

Future представляет асинхронную операцию, которая завершится позже. async помечает функцию как асинхронную, а await используется для ожидания результата Future, упрощая написание асинхронного кода.

Практическая часть: 

Напишите функцию, которая возвращает Future<String> и выводит сообщение через 2 секунды.

import 'dart:async';

void main() async {
  String result = await delayedMessage();
  print(result);
}

Future<String> delayedMessage() async {
  await Future.delayed(Duration(seconds: 2));
  return 'Сообщение через 2 секунды';
}

Билет №4 

Теоретическая часть: 

1. Как реализуется переход между экранами в Flutter? 

2. Как передаются данные между экранами?

Ответ: 

Переход между экранами осуществляется через Navigator.push(), либо с использованием именованных маршрутов. Данные можно передавать через конструктор целевого экрана или аргументы маршрута.

Практическая часть: 

Создайте два экрана: главный с кнопкой, которая переходит ко второму экрану и передаёт туда строку "Добро пожаловать".

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(message: ModalRoute.of(context)?.settings.arguments as String),
      },
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Экран 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second', arguments: 'Добро пожаловать');
          },
          child: Text('Перейти на второй экран'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  final String message;

  SecondScreen({required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Экран 2')),
      body: Center(
        child: Text(message),
      ),
    );
  }
}

Билет №5  

Теоретическая часть: 

1. Что такое Provider и как он используется в Flutter? 

2. Как работает механизм перестроения (rebuild) в Flutter?

Ответ:

Provider — это способ управления состоянием, который позволяет легко передавать данные по дереву виджетов без прямой передачи через конструкторы. При изменении состояния вызывается метод build(), и Flutter перестраивает виджет, используя механизм diffing для повышения производительности.

Практическая часть: 

Создайте приложение, в котором нажатие на кнопку увеличивает счётчик, отображаемый на экране.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Counter App')),
        body: Center(
          child: Consumer<CounterModel>(
            builder: (context, counter, _) {
              return Text('Счётчик: ${counter.count}');
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Provider.of<CounterModel>(context, listen: false).increment();
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class CounterModel with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

Билет №6 

Теоретическая часть: 

1. Что такое MediaQuery и SafeArea? 

2. Как использовать EdgeInsets для задания отступов?

Ответ: 

MediaQuery предоставляет информацию о параметрах устройства, таких как размер экрана и ориентация. SafeArea гарантирует, что контент не будет перекрыт системными элементами. EdgeInsets задаёт отступы вокруг виджета, например, EdgeInsets.all(10) создаёт отступ со всех сторон.

Практическая часть:

Создайте экран с заголовком, текстом и кнопкой, где все элементы имеют отступы в 16 пикселей от краёв.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Отступы')),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Заголовок'),
              SizedBox(height: 8),
              Text('Основной текст приложения.'),
              SizedBox(height: 16),
              ElevatedButton(onPressed: () {}, child: Text('Кнопка')),
            ],
          ),
        ),
      ),
    );
  }
}

Билет №7

Теоретическая часть: 

1. Что такое Hero-анимация и как она реализуется? 

2. Как работают анимации в Flutter?

Ответ: 

Hero-анимация обеспечивает плавный переход элемента между экранами через виджет Hero с уникальным tag. Анимации создаются через AnimationController, Tween и Animated widgets, такие как AnimatedContainer, AnimatedOpacity и другие.

Практическая часть: 

Создайте две страницы с одинаковым изображением, между которыми происходит Hero-анимация при переходе.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Первая страница')),
      body: Center(
        child: Hero(
          tag: 'imageHero',
          child: Image.network('https://picsum.photos/200/300'), 
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.pushNamed(context, '/second');
        },
        child: Icon(Icons.arrow_forward),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network('https://picsum.photos/200/300'), 
          ),
        ),
      ),
    );
  }
}

Билет №8 

Теоретическая часть: 

1. Какие существуют виды тестирования в Flutter? 

2. Что такое Hot Reload и Hot Restart?

Ответ: 

В Flutter есть unit-тесты, widget-тесты и integration-тесты. Hot Reload быстро обновляет UI без перезапуска приложения. Hot Restart полностью перезапускает приложение, но сохраняет состояние.

Практическая часть: 

Напишите простой unit-тест для функции, которая складывает два числа.

// file: lib/calculate.dart
int sum(int a, int b) => a + b;

// file: test/calculate_test.dart
import 'package:flutter_test/flutter_test.dart';
import 'package:myapp/calculate.dart';

void main() {
  test('Сложение двух чисел', () {
    expect(sum(2, 3), equals(5));
  });
}

Билет №9 

Теоретическая часть: 

1. Что такое ListView и GridView? 

2. В чём разница между FutureBuilder и StreamBuilder?

Ответ: 

ListView отображает список прокручиваемых элементов вертикально. GridView показывает элементы в виде сетки. FutureBuilder строит интерфейс на основе Future, а StreamBuilder — на основе потока данных.

Практическая часть: 

Создайте ListView, который отображает список из 5 элементов.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Список')),
        body: ListView.builder(
          itemCount: 5,
          itemBuilder: (context, index) {
            return ListTile(title: Text('Элемент $index'));
          },
        ),
      ),
    );
  }
}

Билет №10 

Теоретическая часть: 

1. Что такое SharedPreferences и как его использовать? 

2. Как проверить ориентацию устройства?

Ответ: 

SharedPreferences — это хранилище ключ-значение для хранения настроек. Используется через пакет shared_preferences. Ориентация устройства определяется через MediaQuery.orientation.

Практическая часть: 

Сохраните и считайте значение из SharedPreferences.

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final prefs = await SharedPreferences.getInstance();
  runApp(MyApp(prefs: prefs));
}

class MyApp extends StatelessWidget {
  final SharedPreferences prefs;

  MyApp({required this.prefs});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SharedPreferences')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              prefs.setInt('counter', 10);
              print('Сохранено: ${prefs.getInt('counter')}');
            },
            child: Text('Сохранить счётчик'),
          ),
        ),
      ),
    );
  }
}

Билет №11 

Теоретическая часть:

1. Что такое Theme и как им пользоваться? 

2. Как использовать AssetImage и NetworkImage?

Ответ: 

Theme задаёт единый стиль всему приложению. Используется через MaterialApp.theme или Theme.of(context). AssetImage загружает изображения из локальных ресурсов, а NetworkImage — с удалённого URL.

Практическая часть: 

Создайте тему с красным цветом акцента и примените её к приложению.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.red),
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Тема')),
      body: Center(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(backgroundColor: Theme.of(context).colorScheme.secondary),
          onPressed: () {},
          child: Text('Красная кнопка'),
        ),
      ),
    );
  }
}

Билет №12 

Теоретическая часть:

1. Что такое Form и TextFormField? 

2. Зачем нужен TextEditingController?

Ответ: 

Form группирует поля ввода и обеспечивает валидацию. TextFormField — поле формы с возможностью валидации. TextEditingController управляет текстовым полем: считывает, изменяет и прослушивает изменения значения.

Практическая часть: 

Создайте форму с одним полем ввода и кнопкой, которая выводит введённое значение.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Форма')),
        body: MyForm(),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _controller = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextField(controller: _controller),
          SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              print('Вы ввели: ${_controller.text}');
            },
            child: Text('Отправить'),
          ),
        ],
      ),
    );
  }
}

Билет №13 

Теоретическая часть: 

1. Что такое Drawer и как его реализовать? 

2. Что такое BottomNavigationBar и как им пользоваться?

Ответ: 

Drawer — боковое меню, открываемое свайпом или нажатием кнопки. Реализуется через виджет Drawer внутри Scaffold. BottomNavigationBar позволяет переключаться между основными разделами приложения. Управление состоянием осуществляется через currentIndex и onTap.

Практическая часть: 

Создайте приложение с Drawer и BottomNavigationBar, которые меняют содержимое экрана.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;

  final List<Widget> _screens = [
    Center(child: Text('Главная')),
    Center(child: Text('Профиль')),
    Center(child: Text('Настройки')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Drawer & BottomNav')),
      drawer: Drawer(
        child: ListView(
          children: [
            ListTile(title: Text('Главная'), onTap: () => setState(() {_currentIndex = 0; Navigator.pop(context); })),
            ListTile(title: Text('Профиль'), onTap: () => setState(() {_currentIndex = 1; Navigator.pop(context); })),
            ListTile(title: Text('Настройки'), onTap: () => setState(() {_currentIndex = 2; Navigator.pop(context); })),
          ],
        ),
      ),
      body: _screens[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Главная'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Профиль'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Настройки'),
        ],
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

Билет №14 

Теоретическая часть:

1. Что такое SnackBar и FloatingActionButton? 

2. Как использовать LayoutBuilder для адаптивного дизайна?

Ответ: 

SnackBar выводит временное сообщение в нижней части экрана. FloatingActionButton — круглая кнопка действия. LayoutBuilder позволяет строить виджеты на основе доступного места, что важно для создания адаптивных интерфейсов.

Практическая часть: 

Создайте экран с кнопкой, по нажатию на которую появляется SnackBar и адаптивный контент через LayoutBuilder.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SnackBar & LayoutBuilder')),
        body: LayoutBuilder(
          builder: (context, constraints) {
            if (constraints.maxWidth > 600) {
              return Center(child: Text('Широкий экран'));
            } else {
              return Center(child: Text('Узкий экран'));
            }
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Пример SnackBar')));
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Билет №15 

Теоретическая часть: 

1. Что такое const и final в Dart? 

2. Как использовать null-aware операторы в Dart?

Ответ: 

const — это compile-time константа, используется для создания неизменяемых объектов. final — переменная, которая инициализируется один раз при выполнении. ?? — возвращает значение, если оно не null, иначе значение справа. ?. — безопасный вызов метода, если объект не null.

Практическая часть: 

Создайте функцию, которая принимает строку и выводит "Привет" + имя, если оно не null, иначе "Гость".

void main() {
  String? name = null;
  greet(name);
}

void greet(String? name) {
  print('Привет, ${name ?? 'Гость'}');
}