Take a moment to think back to the last time you looked at a settings page.
最後に設定ページを見たときのことを思い出してください。
Wow, you probably said to yourself I wish I could quickly and easily create a list of toggle switches like that.
「うわー」あなたはおそらくに「このようなtoggle(切り替え)スイッチのリストを素早く簡単に作成できたらいいのに」と言ったでしょう。
And you can! With SwitchListTile,
SwitchListTileウィジェットを使えばできます!
You get a list tile that’s tappable anywhere to switch a toggle from off to on.
任意の場所をタップしてトグルをオフからオンに切り替えることができるリストタイルを作れます。
SwitchListTiles API looks a lot like widgets of similar names.
SwitchListTiles APIは、類似した名前のウィジェットによく似ています。
ListTile, CheckboxListTile, RadioListTile, SwitchListTile all follow the same pattern.
ListTile、CheckboxListTile、RadioListTile、SwitchListTileはすべて同じパターンに従います。
Start with the title: Text,
まずtitleフィールドにTextウィジェットを設定します↓。
ListTile(
title: Text("ListTile"),
),
SwitchListTile(
title:Text("SwitchListTile"),
/* ... */
),
which will appear in the middle of the tile.
設定したテキストはタイルの中央に表示されます。
Then you can add Icons to either end,and with the control tiles, like SwitchListTile,you do this with the secondary property.
次に、左右の端にアイコンを追加できます。
SwitchListTileなどのコントロールタイルでは、secondaryプロパティにアイコン・画像などを設定します。
ListTile(
title:Text("ListTile"),
leading: Icon(Icons.ac_unit),
trailing: Fire(),
),
SwitchListTile(
title:Text("SwitchListTile"),
secondary : Bird(),
/* ... */
),
ListTile(
title:Text("ListTile"),
subtitle: Text("Hot and cold?"),
leading: Icon(Icons.ac_unit),
trailing: Fire(),
),
SwitchListTile(
title:Text("SwitchListTile"),
subtitle: Text("Bird mode?"),
secondary : Bird(),
controlAffinity:
ListTileControlAffinity.leading,
/* ... */
),
You can also add a subtitle or flip which side the controls are on using ControlAffinity.
subtitleフィールドを設定することで字幕を追加することができます。
さらにControlAffinityフィールドを設定して、コントロールを左右どちら側に配置するかを反転させるもできます。
↑controlAffinityフィールドをListTileControlAffinity.leadingに設定することで
コントロール(スイッチ、チェックボックスなど)を(先頭)左側に配置。
SwitchTile and the other control tiles add the feature that the entire tile is tappable,but they don’t just toggle all on their own.
SwitchTileおよびその他のコントロールタイルを使うと、タイル全体をタップ可能になります。
ただ、すべてを単独で切り替えるだけではありません。
For that, SwitchListTile needs a value, an onChanged callback.
「スイッチの切り替え」を状態に反映させるような実装をするためにSwitchListTileにはvalueフィールドとonChangedフィールドが必要です。
This value is a form of state,so you’ll typically find this SwitchListTile in a stateful widget so that onChanged can update it with setState.
このvalueは状態の形式であるため、通常、このSwitchListTileはステートフルウィジェットにあり、onChangedコールバック内で、setStateメソッドにより状態を更新できるようになっています。
SwitchListTile(
title: Text("SwitchListTile"),
value:_toggled,
onChanged:(bool value){
setState(()=> _toggled = value);
}
),
One thing that SwitchListTile has the other controls don’t– the ability to add an image to the control with active and inactiveThumbImage.
SwitchListTileには他のコントロールにはないものが1つあります。それは、activeおよびinactiveThumbImageを使用してコントロールに画像を追加する機能です。
トグルスイッチの丸い部分に画像を設定できるみたいです。
あんまりそういうことしているの見ないですが笑
//main.dart
//サンプル
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _toggled = true;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Container(
width:300,
//color: _toggled ? Colors.deepOrange : Colors.indigoAccent,
//color: Colors.lightGreenAccent,
child: ListView(
children: [
Container(
color:_toggled ? Colors.purpleAccent[100] : Colors.purpleAccent[700],
child: SwitchListTile(
selected:_toggled,
activeColor:Colors.pink,
activeTrackColor:Colors.amber,
inactiveTrackColor:Colors.indigo,
secondary:Icon(Icons.recommend),
title: Text(
"SwitchListTile",
style:TextStyle(color:_toggled ? Colors.white : Colors.black,),
),
value: _toggled,
onChanged: (bool value) {
setState(() => _toggled = value);
},
),
),
Container(
height:300,
color: _toggled ? Colors.amber : Colors.indigo,
child:Center(child:Text(_toggled.toString(),),),
),
],
),
),
),
),
);
}
}
(スイッチon)
(スイッチoff)