f memo

GetX

グラデーション背景

Container(
  height: double.infinity,
  width: double.infinity,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [
        Color(0xFF73AEF5),
        Color(0xFF61A4F1),
        Color(0xFF478DE0),
        Color(0xFF398AE5),
      ],
      stops: [0.1, 0.4, 0.7, 0.9],
    ),
  ),
),

ElevatedButton（ボタン・角丸・padding）

child: ElevatedButton(
  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.all(15),
    primary: Colors.white,
    onPrimary: Colors.blue,
    shape: const StadiumBorder(),
  ),
  onPressed: () => print('クリックされました'),
  child: Text(
    'LOGIN',
    style: TextStyle(
      color: Colors.blue,
      fontWeight: FontWeight.bold,
      fontFamily: 'OpenSans',
      fontSize: 15.0,
    ),
  ),
),

GestureDetector（widgetをボタンにする）

GestureDetector(
  onTap: () {
    // シングルタップ時に呼ばれる
  },
  // タッチ検出対象のWidget
  child: Text(
    'How to use GestureDetector',
    textAlign: TextAlign.center,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
)

DropdownButton

class _homePageState extends State<homePage> {
  String? isSelectedItem;

  List listItem = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            //3
            DropdownButton(
              //4
              items: const [
                //5
                DropdownMenuItem(
                  child: Text('aaa'),
                  value: 'aaa',
                ),
                DropdownMenuItem(
                  child: Text('bbb'),
                  value: 'bbb',
                ),
                DropdownMenuItem(
                  child: Text('ccc'),
                  value: 'ccc',
                ),
              ],
              //6
              onChanged: (String? value) {
                setState(() {
                  isSelectedItem = value;
                });
              },
              //7
              value: isSelectedItem,
            ),
            const SizedBox(
              height: 32,
            ),
            Text('$isSelectedItem が選択されました。')
          ],
        ),
      ),
    );
  }
}

SVG画像

import 'package:flutter_svg/flutter_svg.dart';

child: SvgPicture.asset(
  'assets/images/pw_logo.svg',
  semanticsLabel: 'logo',
  width: 300,
  //height: 10,
),

flutter_svg: ^1.1.1+1

appbarの高さ取得

var height = AppBar().preferredSize.height;

padding

padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
padding: EdgeInsets.all(10.0),

Expanded Widget

Expanded(
  flex: 3,
  child: Container(
    height: 200,
    width: 100,
    color: Colors.blue,
  ),
),

SingleChildScrollView Widget（スクロール）

SingleChildScrollView(
  physics: AlwaysScrollableScrollPhysics(),//スクロールさせる
  physics: NeverScrollableScrollPhysics(),//スクロールさせない
)

//横にスクロールさせる
SingleChildScrollView(
  scrollDirection: Axis.horizontal,
),

obscureText（入力値を隠す）

obscureText: true,

null safety

int? num = null;

DateTime型

DateTime date = DateTime(2022, 10, 13, 1, 2, 3); //年月日時分秒
DateTime date = DateTime.now(); //現在時刻
print(date.day);//日を取得

showDialog

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text("アラートタイトル"),
    content: Text("これは本文です"),
    actions: [
      TextButton(
        onPressed: () {},
        child: Text("Yes"),
      ),
      TextButton(
        onPressed: () {},
        child: Text("No"),
      ),
    ],
  ),
);

List

List<int> numberList = [1,2,3,4,5];
numberList.add(1);
numberList.remove(1);
numberList.removeAt(index);

Map

Map<String, int> testMap = {
  'tanaka': 50,
  'suzuki': 99,
};
print(testMap['tanaka']);

画面遷移

Divider Widget（罫線）

Divider(
  height: 30,//このwidgetの高さ
  thickness: 1,//線の太さ
  indent: 10,//左端のスペース
  endIndent: 10,//右端のスペース
  color: Colors.grey,//線の色
),

Column/Row Widget

Column() //縦
Row() //横

MainAxisAlignment.spaceEvenly //均等に配置

Text Widget（テキスト表示）

Text(
  '文字の色とテーマを変更',
  style: Theme.of(context).textTheme.headline5?.copyWith(color: Colors.red),
),

Text(
  'テキストスタイルでの変更',
  style: TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 20,
    color: Theme.of(context).primaryColor,
  ),
), 

Stack Widget（widgetを重ねる）

Stack(
  alignment: Alignment.center, // 重ねる位置を指定
  children: [
    Container(
      margin: EdgeInsets.all(10.0),
      color: Colors.green,
      height: double.infinity,
    ),
    CircularProgressIndicator(),
  ],
),

ListView Widget

class homePage extends StatelessWidget {
  const homePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final items = List.generate(10, (index) => 'Hello World $index');
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return ListTile(title: Text(item));
        },
      ),
    );
  }
}

floatingActionButton

Scaffold(
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.close),
    onPressed: () {},
  ),
  //floatingActionButtonの位置
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);