Align class
子をそれ(Align)自体の中に配置し、オプションで子のサイズに基づいてサイズを変更するウィジェット。
工事中🏗
Being able to compose widgets together is one of Flutter’s most powerful features.
ウィジェットを一緒に構成(一緒に組み合わせて配置)できることは、Flutterの最も強力な機能の1つです。
But how can you specify how a child should be laid out or positioned inside its parent?
しかし、子ウィジェットを親ウィジェットの内部にどのようにレイアウトし、また、位置をどのように指定すれば良いでしょう？
For example, if you have a Container widget,
how do you choose where a Text widget might show up inside it?
たとえば、Container(コンテナ)ウィジェットがある場合、
Text(テキスト)ウィジェットがその中のどこに表示されるかをどのように選択しますか？
The simplest case is to center it using the Center widget.
最も単純なケースは、Centerウィジェットを使用して中央に配置することです。
But what if you want to place it in the bottom right, for example?
しかし、たとえば右下に配置したい場合はどうでしょうか。
Here’s where the Align widget comes in handy.
ここで、Alignウィジェットが役立ちます。
Align will let you place widgets in a defined area of its parent widget,
such as the bottomRight, or topLeft, or centerRight–
Alignを使用すると、親ウィジェット内の希望する領域にウィジェットを配置できます。
bottomRight(右下)、topLeft(左上)、centerRight(中央右)など-
wherever you fancy.
どこでも好きなところに配置できます。
You can also specify the alignment values where -1 to 1 are the ranges for both left to right and top to bottom.
アライメント値を指定することもできます。ここで、-1から1は、左から右、および上から下の両方の範囲です。
This lets you precisely lay out your child widget within its parent.
これにより、子ウィジェットをその親ウィジェット内に正確にレイアウトできます。
You can also use Align to position widgets in a stack.
Alignを使用して、ウィジェットをStackに配置することもできます。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: Text(_title)),
body: AlignSample(),
),
);
}
}
class AlignSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Align(
//alignment: Alignment.bottomRight, //←ここの値を変えてみよう。
alignment: Alignment.topCenter,
child: Text(
'Hello!!',
style:TextStyle(fontSize:70.0,),
),
),
);
}
}
alignmentフィールドの値を変えて表示を確認してみよう😀
//親ウィジェットであるContainerのサイズを変えた場合。
//わかりやすいようにContainerの背景色を追加。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: Text(_title)),
body: AlignSample(),
),
);
}
}
class AlignSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color:Colors.lightGreenAccent, //←Containerの色を指定。
width:300, //←Containerの幅を指定。
height:500, //←Containerの高さを指定。
child: Align(
//alignment: Alignment.bottomRight,
alignment: Alignment.bottomRight,
child: Text(
'Hello!!',
style:TextStyle(fontSize:30.0,),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: Text(_title)),
body: AlignSample(),
),
);
}
}
class AlignSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color:Colors.lightGreenAccent,
width:300,
height:500,
child: Align(
//alignment: Alignment.bottomRight,
alignment: Alignment(0.0,0.0),//←このような指定方法も可能。
child: Text(
'Hello!!',
style:TextStyle(fontSize:30.0,),
),
),
);
}
}
工事中🏗
How it works
工事中🏗
参考