初心者と一緒にFlutterを学ぼう サンプルをいじる編

実際に書いてみよう

Part2はサンプルプログラムがどのように動くか見ましたが、今回はサンプルプログラムをちょこっといじってみましょう

サンプルプログラムをコピペ

docs.flutter.dev

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: const Center(
child: Text('Hello World'),
),
),
);
}
}

このサンプルプログラムをコピペします。前のパートで使ったmain.dartを全部消してこのソースコードにコピペしてもいいですし、新しいプロジェクトを作成しても問題ありません。

とりあえずこのプログラムを実行してみましょう。

前のパートと同じようにAVDを起動させ、実行させます。

hello worldが表示されました。

外部パッケージを使う

android studioのコンソールを使って、english_wordsというパッケージをダウンロードします。

ここにあるコンソールをクリックして、

こんな感じでpowershellかコマンドプロンプトが出てくるので

flutter pub add english_words

を入力して実行します。

次にこのプロジェクトにダウンロードしたパッケージを取り込みます。
android studioに pubspec.yaml が表示されていることが必要なようです。

flutter pub get

プログラムを書く

書きます（コピペでＯＫです）

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final wordPair = WordPair.random();
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: Center(
child: Text(wordPair.asPascalCase),
),
),
);
}
}

import 'package:english_words/english_words.dart';

final wordPair = WordPair.random();

        body: Center(
child: Text(wordPair.asPascalCase),