いちのこんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです
この記事を読んでわかること
- Flutterでの絶対位置と相対位置の基本
- 絶対位置と相対位置を利用したウィジェット配置方法
開発環境
- Dart 3.0.0
- Flutter 3.10.0
目次
座標指定の基本
概要
座標指定には「絶対位置」と「相対位置」の二つの方法があります。絶対位置は、画面の左上を原点として、特定の位置をピクセル単位で指定します。相対位置は、他のウィジェットや親ウィジェットの位置を基準にして、ウィジェットの位置を決定します。
絶対位置
絶対位置を指定するには、Positioned ウィジェットを使用します。これはStackウィジェット内で使用され、子ウィジェットの正確な位置を指定するために役立ちます。
相対位置
相対位置を指定するには、Align や FractionallySizedBox などのウィジェットが使用されます。これらは、親ウィジェットのサイズや位置を基準にして、子ウィジェットの位置やサイズを調整するために便利です。
絶対位置のサンプルコードと解説
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
Positioned(
left: 50, // 1行目: 左端から50ピクセルの位置
top: 100, // 2行目: 上端から100ピクセルの位置
child: Text('絶対位置で配置', style: TextStyle(fontSize: 20)), // 3行目: テキスト表示
),
],
),
),
);
}
}サンプルコードの解説
- 13行目で
leftプロパティを使って左端からの距離を指定しています。 - 14行目で
topプロパティを使って上端からの距離を指定しています。 - 15行目でテキストウィジェットを配置し、表示しています。
表示確認
いちのそれでは、表示を確認してみましょ〜
相対位置のサンプルコードと解説
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
width: 300, // 1行目: コンテナの幅を300ピクセルに設定
height: 200, // 2行目: コンテナの高さを200ピクセルに設定
color: Colors.blue, // 3行目: コンテナの背景色を青に設定
child: Align(
alignment: Alignment.topRight, // 4行目: 子ウィジェットを右上に配置
child: Text('相対位置で配置', style: TextStyle(fontSize: 20, color: Colors.white)), // 5行目: テキスト表示
),
),
),
),
);
}
}サンプルコードの解説
- 12行目と13行目でコンテナの幅と高さを指定しています。
- 14行目でコンテナの背景色を設定しています。
- 16行目で
Alignウィジェットを使用して、子ウィジェットの位置を親ウィジェットの右上に設定しています。 - 17行目でテキストウィジェットを配置し、表示しています。
表示確認
いちのそれでは、表示を確認してみましょ〜
まとめ
いかがでしたでしょうか？今回は、座標指定(絶対位置、相対位置)について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！
いちの自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。
コメント