Flutter для Android-розробників. Як створювати UI для Activity, використовуючи Flutter

 

Ця стаття написана для Android-розробників, які хочуть застосувати свої існуючі знання для створення мобільних додатків за допомогою Flutter. У цій статті ми розглянемо еквівалент Activity під Flutter.

 

Попередні вимоги

Передбачається, що ви вже налаштували Flutter на своєму ПК і можете запустити програму «Hello World». Якщо ні, то зробіть це.

Dart заснований на концепції ООП, тому Android-розробнику не складе труднощів почати використовувати його.

 

Мета

У кінці статті ми зможемо створювати користувальницький інтерфейс для Activity, використовуючи Flutter-віджети, який буде виглядати так:

Взагалі, якщо ви зазирнете всередину Android-проекту, згенерованого з допомогою Flutter і відкриєте файл AndroidMenifest.xml, то ви виявите, що там знаходиться всього одна Activity, наприклад, FlutterActivity. Але в цій статті ми зосередимося на проектуванні користувальницького інтерфейсу для Activity під Flutter. Як? За допомогою scaffold (англ. будівельні ліси).

 

Scaffold

Scaffold — це набір віджетів, які візуально являють собою інтерфейс для Activity. Як правило, Activity використовується для відображення екрану, що складається з багатьох View-компонентів, таких як панель інструментів, меню, бічне меню, снек-бар, FAB і т. д. А FrameLayout використовується як контейнер для фрагментів у Activity. У scaffold все це представлено у вигляді віджетів.

Запам’ятайте, будь компонент у Flutter — віджет.

 

Зображення вище наочно демонструє складові scaffold, який надає API для відображення бічних меню, нижній панелі, тулбара, області вмісту.

Оскільки scaffold — це material-віджети, то вони повинні успадковуватися від якихось інших material-компонентів, але ми обговоримо це більш детально в інших статтях. Зараз ми зосередимося на створення scaffold-віджета.

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
 home: new Scaffold(
),
 ));

Коли ви запустите цей код, ви побачите білий порожній екран, тому що ви ще нічого не додали в scaffold. Тому давайте визначимо колір фону за допомогою властивості backgroundColor і встановимо жовтий колір:

void main() => runApp(new MaterialApp(
 home: new Scaffold(
 backgroundColor: Colors.yellowAccent,
),
 ));

Тепер ви побачите повністю жовтий екран вашого додатка. Ви можете погратися з іншими властивостями scaffold, повний список яких можна знайти в офіційній документації.

Читайте також  Як сьогодні створюються 64k intro: занурення в Immersion

Тепер ми знаємо, як створити scaffold. Давайте дослідимо його основні властивості одне за іншим.

1. AppBar (Toolbar)

AppBar по суті той же Toolbar, який ми використовуємо в нашій Activity. На рисунку показано, де відображаються властивості AppBar.

 

 

  • leading: віджет, який відображається перед заголовком. Це може бути іконка гамбургер меню і кнопка «Назад».
  • title: заголовок тулбара, обгорнутий в віджет Text.
  • actions: це еквівалент menu.xml, в якому ми створюємо набір <item/> для відображення пунктів меню. Властивість actions приймає список віджетів для відображення меню. Зазвичай цими віджети представлені у вигляді IconButtons, які еквівалентні <item/>.
  • bottom: зазвичай використовується для TabBar, розташованого під AppBar.
  • flexibleSpace: цей віджет використовується для створення ефекту CollapsingToolbarLayout (схлопывающегося тулбара).

Таким чином, ви можете створити простий Appbar з іконкою, заголовком і меню:

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
 home: new Scaffold(
 backgroundColor: Colors.yellowAccent,
 appBar: new AppBar(
 leading: new Icon(Icons.menu),
 title: new Text("My Title"),
 actions: <Widget>[
 new IconButton(
 icon: new Icon(Icons.shopping_cart),
 onPressed: () {},
),
 new IconButton(
 icon: new Icon(Icons.monetization_on),
 onPressed: () {},
)
],
),
),
 ));

 

 

Це отриманий результат. Виглядає точно так само, як звичайний тулбар, який ми зазвичай використовуємо. Ви можете поекспериментувати з додаванням або видаленням віджетів, додаванням кольору чи стилю конкретного віджету.

В якості практичної вправи можете вивчити інші властивості AppBar і попрацювати з ними.

2. Body (контейнер для будь-якого View-компонента)

Це головна складова scaffold. Вона працює так само, як Fragment Container в Android. Для відображення в галузі контейнера потрібно віджет. Це область, де ми відображаємо користувачеві основний контент. У нашому прикладі для простоти ми додамо червоний колір body. У реальному житті крім кольору фону використовується безліч інших віджетів, наприклад, ListView, Row, Column, Stack і т. д.

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
 home: new Scaffold(
 backgroundColor: Colors.yellowAccent,
 appBar: new AppBar(
 leading: new Icon(Icons.menu),
 title: new Text("My Title"),
 actions: <Widget>[
 new IconButton(
 icon: new Icon(Icons.shopping_cart),
 onPressed: () {},
),
 new IconButton(
 icon: new Icon(Icons.monetization_on),
 onPressed: () {},
)
],
),
 body: new Container(
 color: Colors.red,
),
),
 ));

 

Читайте також  7 сервісів для створення презентацій, крім Power Point.

 

Body відображається позаду AppBar, FAB і бічного меню. Незважаючи на те, що ми застосували жовтий фон до scaffold, на екрані відображається червоний колір body, перекриває фон scaffold.

 

3. Drawer (DrawerLayout)

Цей віджет являє собою DrawerLayout в Android, який виїжджає з лівої частини Activity для відображення навігаційних посилань додатки.

Drawer зазвичай використовується з властивістю Scaffold.drawer. Як і в Android, ми використовуємо NavigationView всередині DrawerLayout. У таблиці нижче наведені еквівалентні View-компоненти в Android і Flutter.

Дочірнім компонентом віджета Drawer зазвичай є ListView, чий перший елемент — DrawerHeader, який відображає інформацію про поточного користувача. Інші елементи списку, як правило, створюються з допомогою ListTiles. Наступний код показує, яким чином створюється Drawer:

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
 home: new Scaffold(
 backgroundColor: Colors.yellowAccent,
 appBar: new AppBar(
 title: new Text("My Title"),
 actions: <Widget>[
 new IconButton(
 icon: new Icon(Icons.shopping_cart),
 onPressed: () {},
),
 new IconButton(
 icon: new Icon(Icons.monetization_on),
 onPressed: () {},
)
],
),
 drawer: new Drawer(
 child: new ListView(
 children: <Widget>[
 new DrawerHeader(
 child: new Text("Drawer Header"),
 decoration: new BoxDecoration(
 color: Colors.blue,
),
),
 new Text("Item 1"),
 new Text("Item 2"),
 new Text("Item 3"),
 new Text("Item 4"),
 new Text("Item 5"),
 new Text("Item 6"),
],
),
),
),
 ));

 

 

Ось такий результат ви повинні отримати. Варто зазначити, що при додаванні в scaffold віджета Drawer в AppBar автоматично додається іконка гамбургер-меню, тому всі інші іконки варто видалити.

Для отримання додаткової інформації про це віджет ви можете ознайомитися з практичним прикладом документації або присвяченій цій темі окремій статті.

4. BottomNavigationBar (BottomNavigationView)

 

Material-віджет, який відображається в нижній частині додатка, BottomNavigationBar складається з декількох елементів у вигляді тексту і іконок.

BottomNavigationBar зазвичай застосовується за допомогою властивості Scaffold.bottomNavigationBar.

В Android ви визначаєте пункти меню в BottomNavigationView з допомогою властивості app:menu="@menu/my_navigation_items", де my_navigation_items — це список всіх пунктів меню в теге <item/>. У Flutter використовується властивість items, яке приймаєте в якості аргументу список BottomNavigationBarItem, кожен з яких складається з іконки, заголовка і кольору фону в меню.

Читайте також  Проект wideNES — виходимо на межі екрану NES

 

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
 home: new Scaffold(
 backgroundColor: Colors.yellowAccent,
 appBar: ...,
body:...,
 drawer: ...,
 bottomNavigationBar: new BottomNavigationBar(items: [
 new BottomNavigationBarItem(
 icon: new Icon(Icons.home),
 title: new Text("Home"),
),
 new BottomNavigationBarItem(
 icon: new Icon(Icons.search),
 title: new Text("Search"),
)
]),
),
 ));

 

 

Тепер у нас є BottomNavigationBar з двома пунктами меню.

Для обробки кліка і зміни вмісту в scaffold потрібний віджет підтримує збереження стану і деяка ручна робота. Ця тема виходить за рамки цієї статті, але ви можете почитати про це в офіційній документації.

Крім того, давайте додамо FAB в scaffold. Нижче представлений повний код для створення нашого інтерфейсу Activity з допомогою scaffold.

 

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
 home: new Scaffold(
 backgroundColor: Colors.yellowAccent,
 appBar: new AppBar(
 title: new Text("My Title"),
 actions: <Widget>[
 new IconButton(
 icon: new Icon(Icons.shopping_cart),
 onPressed: () {},
),
 new IconButton(
 icon: new Icon(Icons.monetization_on),
 onPressed: () {},
)
],
),
 body: new Container(
 color: Colors.red,
),
 drawer: new Drawer(
 child: new ListView(
 children: <Widget>[
 new DrawerHeader(
 child: new Text("Drawer Header"),
 decoration: new BoxDecoration(
 color: Colors.blue,
),
),
 new Text("Item 1"),
 new Text("Item 2"),
 new Text("Item 3"),
 new Text("Item 4"),
 new Text("Item 5"),
 new Text("Item 6"),
],
),
),
 bottomNavigationBar: new BottomNavigationBar(items: [
 new BottomNavigationBarItem(
 icon: new Icon(Icons.home),
 title: new Text("Home"),
),
 new BottomNavigationBarItem(
 icon: new Icon(Icons.search),
 title: new Text("Search"),
)
]),
 floatingActionButton: new FloatingActionButton(
 onPressed: (){},
 child: new Icon(Icons.add),
),
),
 ));

 

 

Зараз у FAB метод onPressed не визначений. Тому кнопка не буде реагувати на дотики. При необхідності ви можете додати обробку цієї події.

Нарешті, ми отримали результат, про який йшлося на початку цієї статті.

Висновок

 

Flutter — потужний інструмент для швидкої розробки якісного, красивого інтерфейсу. Він надає безліч віджетів для створення гнучкого інтерфейсу з привабливою анімацією. Scaffold — один з них, і це лише верхівка айсберга. В наступних статтях розглянемо інші теми.

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *