Flutter: пишем приложение за 2 часа (Workshop)

Неплохой воркшоп по Flutter продолжительностью всего 2 часа для начинающих. Алиса Цветкова поделится основами разработки мобильных приложений на Flutter для тех, кто еще его не пробовал, она покажет красоту и простоту технологии и вдохновит на создание приложений именно на нем. За 2 часа можно понять основные принципы, «пощупать» технологию руками и сделать несложное приложение.

Что такое Flutter:

  • SDK — набор инструментов для создания
  • кроссплатформенного кода, в том числе одновременно под IOS/Android
  • Framework — коллекция удобных для разработки компонент

Выпущен Google в 2017 году на базе языка Dart.

Ниже будут слайды из презентации и основные шаги для начинающих во Flutter. Ссылки на исходники в конце статьи.

Material App — точка входа в приложение, вершина иерархии виджетов, он говорит о том, что приложение собирается использовать компоненты и принципы Material Design. В том числе отвечает за навигацию. Scaffold — единственный контейнер верхнего уровня, реализующий все основные компоненты мобильного приложения.
import 'package:flutter/material.dart';

void main() {
 runApp(MaterialApp(
     home: Scaffold(
         appBar: AppBar(title: Text("First App"), centerTitle: true),
         body: Center(
             child: Stack(
           children: <Widget>[
             Text("Hello, Flutter!",
                 style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold))
           ],
         )))));
}
import 'package:flutter/material.dart';
import 'dart:io';

void main() {
 runApp(MaterialApp(
     home: Scaffold(
         backgroundColor: const Color(0xFF37474f),
         appBar: AppBar(
           title: Text("Second App"),
           centerTitle: true,
           backgroundColor: const Color(0xFF509f93),
         ),
         body: Stack(
           children: <Widget>[
             Text("А куда ты хочешь попасть?",
                 textAlign: TextAlign.center,
                 style: TextStyle(
                   fontSize: 30,
         fontFamily: 'OpenSans',
                   color: Colors.white,
                 )),
             Center(
                 child: Image(
               image: AssetImage("assets/images/cat.png"),
             )),
             Align(
                 alignment: Alignment.bottomCenter,
                 child: ButtonBar(
                   mainAxisSize: MainAxisSize.min,
                   children: <Widget>[
                     MaterialButton(
                         height: 40.0,
                         child: Text('Заберите меня отсюда'),
                         color: Colors.blue,
                         onPressed: () => exit(0)),
                     MaterialButton(
                       height: 40.0,
                       child: Text('Только вперед!'),
                       color: Colors.red,
                       onPressed: () {/** */},
                     ),
                   ],
                 ))
           ],
         ))));
}

Android: добавляем в файл AndroidManifest.xml (/android/app/src/main/) две строчки сразу над тегом <application>:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

IOS: добавляем в файл Info.plist (/ios/Runner/) перед тегами </dict></plist>:
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>This app needs access to location when open.</string>
  <key>NSLocationAlwaysUsageDescription</key>
  <string>This app needs access to location when in the background.</string>
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>This app needs access to location when open and in the background.</string>

Ссылка на GitHub — https://github.com/alisa-tsvetkova/devfest

Ссылка на презентацию — https://docs.google.com/presentation/d/1nYqFedxtq9HRNL3PcHDz9_WphVcnigt2YA7nfuv26PQ/edit#slide=id.g9cf17d071e_0_55

 

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

2 × 5 =