Введение в Flutter SDK. Показаны базовые возможности SDK.

1. Экскурсия по Flutter SDK

2. Классика жанра - программа "Привет мир":
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}

3. MaterialApp
MaterialApp является отправной точкой вашего приложения, оно сообщает
Flutter, что вы собираетесь использовать компоненты Material и следовать
дизайну материалов в вашем приложении.

4. Scaffold
Scaffold — это набор виджетов, которые визуально представляют собой
пользовательский интерфейс

5. Результат выполнения программы

6. StatelessWidget
StatelessWidget – это виджет который не имеет состония. Такие видджеты зависят
только от конфигурационных параметров и от родительских виджетов.
Text(
'I like Flutter!',
style: TextStyle(fontWeight: FontWeight.bold),
);

7. StatefulWidget
StatefulWidget – это виджет который имеет состояние.
Под изменяемым состоянием понимается изменение внутреннего состояния
экземпляра класса в зависимости от какого-то события (по нажатию, времени и
пр.)
class MyWidget extends StatefulWidget {
@override
createState() => new MyWidgetState();
}
class MyWidgetState extends State<MyWidget> {
@override
Widget build(BuildContext context) {
return new Text('my text');
}
}

8. Layouts
Основой механизма разметки Flutter являются виджеты. Во Flutter почти все
является виджетами. Изображения, значки и текст, которые вы видите в
приложении Flutter, также являются виджетами.

9. Center
Center - это виджет, который позволяет разместить в себе виджет по центру.

10. Пример:
Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Colors.amber[600],
width: 48.0,
height: 48.0,
),
)

11. Container
Container - это виджет, который позволяет разместить в себе виджет.

12. Пример:
Container(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Colors.amber[600],
width: 48.0,
height: 48.0,
),
)

13. Expanded
Expanded - это виджет, который позволяет разместить в себе виджет и занимает
все своободное пространство.

14. Пример:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expanded Column Sample'),
),
body: Center(
child: Column(
children: <Widget>[
Container(
color: Colors.blue,
height: 100,
width: 100,
),
Expanded(
child: Container(
color: Colors.amber,
width: 100,
),
),
Container(
color: Colors.blue,
height: 100,
width: 100,
),
],
),
),
);
}

15. Flexible
Flexible - это виджет, который позволяет разместить в себе виджет и который
имеет, так называемый, вес flex и стратегию поведения fit .

16. Пример:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Expanded Column Sample"),
),
body: Column(
children: <Widget>[
Flexible(
flex: 2,
fit: FlexFit.tight,
child: Container(
height: 100,
color: Colors.cyan,
),
),
Flexible(
flex: 3,
child: Container(color: Colors.teal),
),
Flexible(
flex: 2,
child: Container(color: Colors.indigo),
)
],
),
);
}

17. Stack
Stack - это виджет, который позволяет разместить в себе виджеты слоями.

18. Пример:
Stack(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 90,
height: 90,
color: Colors.green,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
],
)

19. Row
Row - это виджет, который позволяет разместить виджеты последовательно друг
за другом по горизонтали.

20. Пример:
Row(
children: <Widget>[
Expanded(
child: Text('Deliver features faster', textAlign: TextAlign.center),
),
Expanded(
child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
),
Expanded(
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
),
],
)

21. Column
Column - это виджет, который позволяет разместить виджеты последовательно
друг за другом по вертикали.

22. Пример:
Column(
children: <Widget>[
Text('Deliver features faster'),
Text('Craft beautiful UIs'),
Expanded(
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
),
],
)

23. Navigation
Большинство приложений содержат несколько экранов для отображения
различных типов информации. Например, приложение может иметь экран, на
котором отображаются продукты. Когда пользователь нажимает на изображение
продукта, на новом экране отображаются сведения о продукте.

24. Пример
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Named Routes Demo',
// Start the app with the "/" named route. In this case, the app starts
// on the FirstScreen widget.
initialRoute: '/',
routes: {
// When navigating to the "/" route, build the FirstScreen widget.
'/': (context) => FirstScreen(),
// When navigating to the "/second" route, build the SecondScreen widget.
'/second': (context) => SecondScreen(),
},
));
}

25. import 'package:flutter/material.dart';
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: RaisedButton(
child: Text('Launch screen'),
onPressed: () {
// Navigate to the second screen using a named route.
Navigator.pushNamed(context, '/second');
},
),
),
);
}
}

26. import 'package:flutter/material.dart';
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: RaisedButton(
onPressed: () {
// Navigate back to the first screen by popping the current route
// off the stack.
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}

27. Network
Получение данных из Интернета необходимо для большинства приложений. К
счастью, Dart и Flutter предоставляют инструменты, такие как пакет http, для этого
типа работы.
Для получения данных из сети необходимо:
1. Добавить пакет http в проект
2. Сделать сетевой запрос
3. Преобразовать ответ в объект Dart
4. Получить и отобразить данные

28. 1. Добавить пакета http в проект
Пакет http обеспечивает самый простой способ извлечения данных из Интернета.
Чтобы установить пакет http , добавьте его в раздел зависимостей файла
pubspec.yaml .
dependencies:
http: <latest_version>
Чтобы использовать http пакет, его нужно импортировать.
import 'package:http/http.dart' as http;

29. 2. Сделать сетевой запрос
Future<http.Response> fetchPost() {
return http.get('https://jsonplaceholder.typicode.com/posts/1');
}
Метод http.get() возвращает Future , содержащий ответ.
Future - основной класс Dart для работы с асинхронными операциями.
Объект Future представляет потенциальное значение или ошибку, которое
будет доступна в будущем.
Класс http.Response содержит данные, полученные при успешном вызове
http .

30. 3. Преобразовать ответ в объект Dart
Самый простой способ преобразовать сырые данные - это преобразовать JSON
вручную.

31. 3.1 Создать Post класс
class Post {
final int userId;
final int id;
final String title;
final String body;
Post({this.userId, this.id, this.title, this.body});
factory Post.fromJson(Map<String, dynamic> json) {
return Post(
userId: json['userId'],
id: json['id'],
title: json['title'],
body: json['body'],
);
}
}

32. 3.2 Конвертировать http.Response в Post
Future<Post> fetchPost() async {
final response =
await http.get('https://jsonplaceholder.typicode.com/posts/1');
if (response.statusCode == 200) {
// If server returns an OK response, parse the JSON.
return Post.fromJson(json.decode(response.body));
} else {
// If that response was not OK, throw an error.
throw Exception('Failed to load post');
}
}

33. 4. Получить и отобразить данные
Чтобы получить данные и отобразить их на экране, используйте виджет
FutureBuilder. Виджет FutureBuilder поставляется с Flutter и облегчает работу с
асинхронными источниками данных.
Вы должны предоставить два параметра:
Future, с которым вы хотите работать. В этом случае вызовите функцию
fetchPost() .
Функция конструктор, которая сообщает Flutter, что визуализировать, в
зависимости от состояния Future : загрузка, успех или ошибка.

34. FutureBuilder<Post>(
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data.title);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner.
return CircularProgressIndicator();
},
);

35. Пример:
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: FutureBuilder<Post>(
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data.title);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner.
return CircularProgressIndicator();
},
)));
}
}