Positioned class
Stackの子が配置される場所を制御するウィジェット。
PositionedウィジェットはStackウィジェットの子孫ウィジェットである必要があります。そしてPostionedウィジェットとその祖先のStackウィジェットの間にはStatelessWidget、あるいはStatefulWidgetである必要があります。(それ以外のウィジェット、例えばRenderObjectWidgetのようなウィジェットは不可です。)
Being able to arbitrarily combine and overlay widgets atop one another,
ウィジェットを思いのままに 互いに組み合わせたり上に重ねたりするのは、
it’s simple in Flutter using the Stack widget.
Stackウィジェットを使えば Flutterでは簡単です。
But how do you position those widgets in a Stack?
でも Stackの中で ウィジェットを配置する方法は？
There is a couple of ways you can do this.
方法はいくつかありますが、
And one of them is to use a Positioned widget.
Positionedウィジェットを 使ってみましょう。
You know, for positioning things.
そう ポジションを決めるのです。
Which is kind of self-explanatory when you think about it.
名前で一目瞭然ですよね。
So how does Positioned work?
では このPositionedの仕組みは？
First, let’s wrap a widget in a Stack with a Positioned widget.
まず ウィジェットをStackの中で Positionedウィジェットで(ラップする)囲みます。
Then, use a combination of the parameters top, bottom, left, right, height, and width to position the widget within the Stack.
次に、パラメーターtop、bottom、left、right、height、およびwidthの組み合わせを使用して、ウィジェットをスタック内に配置します。
Here, we see a widget placed 25 down from the top, and 50 in from the left.
And here, we have the widget placed at 25 from the right,and 50 up from the bottom.
こちらではウィジェットを上から25下方向に、左から50内方向に配置し、
こちらでは、右から25内方向、下から50上方向に配置しています。
And one last tip.
最後に一つ、
You can use Positioned.fill to make the widget fill the Stack’s space.
Positioned.fillを使用して、ウィジェットにスタックのスペースを埋めさせることができます。
ウィジェットがPositionedでラップされている場合、そのウィジェットはスタック内のPositionedウィジェットです。 topプロパティがnull以外の場合、この子の上端は、スタックウィジェットの一番上から、topで指定した分下方向に配置されます。 right、bottom、leftプロパティも同様に機能します。
工事中🏗
//Positioned無しバージョン
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: PositionedSample(),
),
);
}
}
class PositionedSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children:[
Container(color:Colors.red,),
Icon(
Icons.accessibility_new,
size:100.0,
),
Text(
'test,test',
style:TextStyle(fontSize:30.0,color:Colors.blue,backgroundColor: Colors.green),
),
],
);
}
}
//IconとTextの位置をPositionedで指定。
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: PositionedSample(),
),
);
}
}
class PositionedSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
color: Colors.red,
),
Positioned(
left:100.0,
top:100.0,
child: Icon(
Icons.accessibility_new,
size: 200.0,
),
),
Positioned(
bottom:0.0,
right:40.0,
child: Text(
'test,test',
style: TextStyle(
fontSize: 30.0,
color: Colors.blue,
backgroundColor: Colors.green),
),
),
],
);
}
}
//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: PositionedSample(),
),
);
}
}
class PositionedSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
//width:,
height:400.0,
child: Stack(
children: [
Container(
color: Colors.red,
),
Positioned(
left:100.0,
top:100.0,
child: Icon(
Icons.accessibility_new,
size: 200.0,
),
),
Positioned(
bottom:0.0,
right:40.0,
child: Text(
'test,test',
style: TextStyle(
fontSize: 30.0,
color: Colors.blue,
backgroundColor: Colors.green),
),
),
],
),
);
}
}
//Stackを縦方向の真ん中に配置(Centerでラップしただけ)
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: PositionedSample(),
),
);
}
}
class PositionedSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
//width:,
height:400.0,
child: Stack(
children: [
Container(
color: Colors.red,
),
Positioned(
left:100.0,
top:100.0,
child: Icon(
Icons.accessibility_new,
size: 200.0,
),
),
Positioned(
bottom:0.0,
right:40.0,
child: Text(
'test,test',
style: TextStyle(
fontSize: 30.0,
color: Colors.blue,
backgroundColor: Colors.green),
),
),
],
),
),
);
}
}
参考
https://api.flutter.dev/flutter/widgets/Positioned-class.html
