Flutterで始めよう！初めてのアプリ作り 🎨
今日はFlutterのチュートリアルを学んでみた(2)
まずは、簡単なアプリを作って、Flutterの基本を学んでいきます。
はじめ
まず最初に、lib/main.dartというファイルの中身を全部消して、新しく書き直します。
これは、お絵かきで新しい紙を用意するようなものですね！
コードを書いてみよう ✨
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'),
),
),
);
}
}
どうしてこんなコードになるの？ 🤔
このコードは、レゴブロックを組み立てるように、少しずつパーツを組み合わせて作られています。
一つずつ見ていきましょう！
1. アプリの入り口 🚪
void main() => runApp(MyApp());
これはアプリの入り口です！お家の玄関みたいなものですね。
「=>」という矢印は、「これをやってね」という短い書き方です。
普通に書くとこんな感じ：
void main() {
runApp(MyApp());
}
2. アプリの基本設計図 📝
class MyApp extends StatelessWidget {
これは「私のアプリはStatelessWidgetという種類のものです」と宣言しているんです。
StatelessWidgetは、変わらない飾り付けをするための道具箱みたいなものです。
3. アプリの見た目を作る 🎨
Widget build(BuildContext context) {
buildは「作る」という意味です。ここでアプリの見た目を作っていきます！
4. マテリアルデザインを使う 🎯
return MaterialApp(
GoogleさんがデザインしたきれいなUIパーツを使えるようにします。
スマホアプリらしい見た目になりますよ！
5. アプリの骨組みを作る 🏗
home: Scaffold(
Scaffoldは「足場」という意味です。アプリの基本的な構造を作ります。
お家を建てるときの骨組みみたいなものですね。
6. 上のバーを付ける 📱
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
アプリの上の部分に青いバーを付けて、その中に文字を表示します。
これがあると、本当のアプリみたいに見えますね！
7. 真ん中にメッセージを表示 📝
body: Center(
child: Text('Hello World'),
),
画面の真ん中に「Hello World」という文字を表示します。
Centerは「真ん中に置いてね」という意味です。
実行してみよう！ 🚀
このコードを実行すると、こんなアプリが出来上がります：
- 上に青いバーがある
- バーには「Welcome to Flutter」と書いてある
- 画面の真ん中に「Hello World」と表示される
やってみよう！ 🌟
- 「Hello World」の文字を自分の好きな言葉に変えてみよう
- 上のバーの文字も変えてみよう
- 違う色を試してみよう
大切なポイント 💡
- Flutterでは、すべてが「Widget（ウィジェット）」という部品でできています
- 部品を組み合わせて、自分の好きなアプリを作ることができます
- 少しずつ変更して、どう変わるか試してみるのが上達のコツです！
さぁ、アプリ作りの冒険を始めましょう！ 🚀
皆さんなら、きっと素敵なアプリが作れますよ！ 💪