Introduction
Hello everyone who wants to get acquainted with Flutter!
I had a burning desire to share with you my knowledge that I have accumulated over several months.
Perhaps my experience is very small compared to guru programmers, I will still try to do something useful for you.
The result of our work will be a small Flutter application that will take data from the JSONPlaceholder .
Our plan
Part 1 (current article) - Introduction to development, first appendix, concept of state;
Part 2 - pubspec.yaml file and using flutter on the command line;
Part 3 - BottomNavigationBar and Navigator;
Part 4 - MVC. We will use this particular pattern as one of the simplest;
Part 5 - http package. Creation of the Repository class, first requests, listing of posts;
Part 6 - Working with pictures, displaying pictures in the form of a grid, receiving pictures from the network, adding your own to the application;
Part 7 - Creating your own theme, adding custom fonts and animations;
Part 8 - A little about testing;
First Step - Configuring and Installing Components
Well, let's get started.
Go to the installation page: Install - Flutter and download Flutter for your platform
Then install the editor or IDE using the Set up an editor instruction
I will be using Google's Android Studio IDE.
For development on Android Studio, you need to install the Flutter plugin (in the Set up an editor instructions , it is described how to do this).
Second step - project creation
Choosing Flutter Application
Next, we indicate the name of the application (the name of the Flutter application must be lowercase, individual words can be separated by an underscore).
Then we specify the package name (used to identify our application among others in Google Play or Apple Store, it can later be changed, in more detail about Android Application ID or Apple App ID ):
Click Finish.
The third step is to create the initial structure of the application
We clear the main.dart file from unnecessary code:
import 'package:flutter/material.dart';
// main()
//
//
void main() => runApp(MyApp());
// Flutter (,, ..)
// - ,
// ( Android )
// StatelessWidget
//
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
// MaterialApp - ,
//
// Material Design .
return MaterialApp(
//
// ,
title: 'Json Placeholder App',
// ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
// ,
home: HomePage(),
);
}
}
Then we create a package (the code should always be organized to make it clearer):
pages:
home_page.dart:
:
import 'package:flutter/material.dart';
// StatefulWidget ,
//
// setState(VoidCallback fn);
// setState
class HomePage extends StatefulWidget {
// StatefulWidget ,
// State
@override
_HomePageState createState() => _HomePageState();
}
// StatefulWidget
//
// _ ,
// _HomePageState
// private Java / Kotlin
class _HomePageState extends State<HomePage> {
// buil, ,
//
@override
Widget build(BuildContext context) {
// Scaffold ,
//
// Scaffold AppBar, BottomNavigationBar,
// Drawer, FloatingActionButton
// ().
return Scaffold(
// AppBar "Home Page"
appBar: AppBar(title: Text("Home page")),
// Scaffold
// Center ,
//
body: Center(
child: Text(
"Hello, JSON Placeholder!!!",
// Text
textAlign: TextAlign.center,
// Theme.of(context)
// ThemeData, MaterialApp
// ThemeData
// ( headline3, )
style: Theme.of(context).textTheme.headline3,
)
)
);
}
}
Flutter - ,
-
, .
HomePage main :
import 'pages/home_page.dart';
: , , :
import 'package:json_placeholder_app/pages/home_page.dart';
, pubspec.yaml (pubspec.yaml ):
, , iOS Android.
, ( , Honor 30i), Run:
!
DEBUG , :
import 'package:flutter/material.dart';
// main()
//
//
void main() => runApp(MyApp());
// Flutter (,, ..)
// - ,
// ( Android )
// StatelessWidget
//
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
// MaterialApp - ,
//
// Material Design .
return MaterialApp(
//
// ,
title: 'Json Placeholder App',
//
debugShowCheckedModeBanner: false,
// ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
// ,
home: HomePage(),
);
}
}
, , hot reload:
Hot Reload 2-5 , .
, .
Hot Reload build . ( )
: Hot Reload , .
: Flutter , :
, .. release Flutter .
, Hot Reload.
-
, .
:
import 'package:flutter/material.dart';
// StatefulWidget ,
//
// setState(VoidCallback fn);
// setState
class HomePage extends StatefulWidget {
// StatefulWidget ,
// State
@override
_HomePageState createState() => _HomePageState();
}
// StatefulWidget
//
// ,
// _HomePageState
// - private Java / Kotlin
class _HomePageState extends State<HomePage> {
// ,
// .. _counter
// ,
// _counter
var _counter = 0;
// build ,
//
@override
Widget build(BuildContext context) {
// Scaffold
//
// Scaffold AppBar, BottomNavigationBar,
// Drawer, FloatingActionButton
// ().
return Scaffold(
// AppBar "Home page"
appBar: AppBar(title: Text("Home page")),
// Scaffold
// Center ,
//
body: Center(
// AnimatedSwitcher,
//
child: AnimatedSwitcher(
// : const
// , Duration
//
// Duration
// (, ..)
duration: const Duration(milliseconds: 900),
// AnimatedSwitcher reverse ,
//
// , ,
// reverseDuration 0
//
reverseDuration: const Duration(milliseconds: 0),
child: Text(
//
// _counter
//
"$_counter",
//
// _counter
// setState,
// AnimatedSwitcher
// key ,
// ,
key: ValueKey<int>(_counter),
// Text
textAlign: TextAlign.center,
// Theme.of(context)
// ThemeData, MaterialApp
// ThemeData
// ( headline3, )
style: Theme.of(context).textTheme.headline3,
),
)
),
//
// FloatingActionButton -
floatingActionButton: FloatingActionButton(
//
// Flutter
child: Icon(Icons.animation),
onPressed: () {
// setState
// ,
// .
//
setState(() {
_counter++;
});
},
),
);
}
}
:
! !
.
, ))
)
!