こんにちは！最近しもやけが出来て足の指がかゆい中村です。デスク下パネルヒーターなる存在を知り本気で購入を検討しています。
前回まででとりあえずFlutterのProjectが実行できるようになったので、今回からは少し踏み込んでコードの内容に迫っていきたいと思います。
とはいっても私も解らないことだらけですので何とか理解できる初期Projectの解説をしていこうと思います。
まず、コメントを抜いた初期プロジェクト全体がこちらになります。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
これ見ても何がなんやらわからないですね。見やすさを重視して今回は最初からあるコメントを消しましたが、チュートリアル的なことが書いてありますので英語が得意な方はやってみてもよいのではないでしょうか？
main関数
void main() {
runApp(const MyApp());
}
このvoid main() { }がmain関数です。通常、Projectを実行したときにいの一番に呼ばれる関数です。このmain関数ではMyAppが呼ばれています。
class MyAPP
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
mainで呼ばれているMyAppです。homeでMyHomePageWidgetをセットしています。
class MyHomePage
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
MyAppでhomeとして指定されたMyHomePageです。
floatingActionButton(画面右下)がonPressedされたときに_incrementCounter関数が呼び出され、_counterがインクリメントされる処理が実行されます。
_incrementCounter関数内でsetState()という関数の中で_counterがインクリメントされていますが、
これは数値を再描画するために必要な処理です。
これにより_counterにどんどん数が足され、その_counterを表示しているのがこのアプリです。
終わりに
自分でもわからない点が多々あり、かなり説明を割愛しましたがこのアプリの仕組みはわかっていただけたと思います。
次回以降は自分が実際に開発していてわからなかった点や便利だなと思った機能について書いていきたいと思います。
それではまた！