🍣

【全スクショ付き】2022年最新版 Flutterウィジェットチートシート

2022/01/18に公開

Version

Flutter: 2.8.1-stable
Dart: 2.15.1

Column

Column(
    mainAxisAlignment: MainAxisAlignment.center, // 縦揃え指定
    crossAxisAlignment: CrossAxisAlignment.start, // 横揃え指定
    children: [
        Container(
            width: 200,
            height: 100,
            color: Colors.cyan,
            margin: const EdgeInsets.only(bottom: 20),
        ),
        Container(
            width: 300,
            height: 100,
            color: Colors.orange,
            margin: const EdgeInsets.only(bottom: 20),
        ),
        Container(
            width: 100,
            height: 100,
            decoration: const BoxDecoration(
                color: Colors.pink,
                shape: BoxShape.circle,
            ),
        ),
    ],
)

Row

Row(
    mainAxisAlignment: MainAxisAlignment.center, // 横揃え指定
    crossAxisAlignment: CrossAxisAlignment.start, // 縦揃え指定
    children: [
        Container(
            width: 100,
            height: 100,
            color: Colors.cyan,
            margin: const EdgeInsets.only(bottom: 20),
        ),
        Container(
            width: 100,
            height: 100,
            color: Colors.orange,
            margin: const EdgeInsets.only(bottom: 20),
        ),
        Container(
            width: 100,
            height: 100,
            decoration: const BoxDecoration(
                color: Colors.pink,
                shape: BoxShape.circle,
            ),
        ),
    ],
)

Expanded

ColumnやRowの中で、可能な限り大きい領域を確保してくれる

Column(
    children: [
        Container(
            color: Colors.amber,
            height: 100,
        ),
        Container(
            color: Colors.indigo,
            height: 100,
        ),
        Expanded(
            child: Container(
                color: Colors.yellowAccent,
            ),
        ),
    ],
),

GestureDetector

子のウィジェットにジェスチャーイベントを持たせられる

GestureDetector(
    onTap: () {},
    onLongPress: () {},
    onDoubleTap: () {},
    onScaleStart: (scaleDetail) {
        // スケール処理が開始された時の処理
    },
    child: Container(
        color: Colors.amber,
        height: 100,
        width: 100,
    ),
)

Opacity

0.2

Stack(
    alignment: Alignment.center,
    children: [
        Assets.images.lion.image(
            height: 200,
            width: 200,
        ),
        Opacity(
            opacity: 0.2, // 0から1まで指定可能
            child: Container(
                color: Colors.black,
                height: 200,
                width: 200,
            ),
        ),
    ],
)

0.8

Stack(
    alignment: Alignment.center,
    children: [
        Assets.images.lion.image(
            height: 200,
            width: 200,
        ),
        Opacity(
            opacity: 0.8,
            child: Container(
                color: Colors.black,
                height: 200,
                width: 200,
            ),
        ),
    ],
)

Transform

rotate

Transform.rotate(
    // pi / 2 => 90deg
    // pi / 4 => 45deg
    // -(pi / 2) => -90deg
    angle: pi / 2,
    child: Assets.images.lion.image(
        height: 200,
        width: 200,
    ),
)

scale

Transform.scale(
    scale: 4,
    child: Assets.images.lion.image(
        height: 200,
        width: 200,
    ),
)

AppBar

Scaffold(
    appBar: AppBar(
        backgroundColor: Colors.orange[200],
        leading: Icon(Icons.home),
        title: Text('AppBar Sample'),
        actions: [
            Icon(Icons.home),
            SizedBox(
                width: 20,
            ),
            Icon(Icons.settings),
        ],
        foregroundColor: Colors.green,
        shadowColor: Colors.red,
    ),
)

BottomNavigationBar

int _selectedIndex = 0;
// テキストの装飾
static const _style = TextStyle(
    fontSize: 50,
    color: Colors.blue,
    backgroundColor: Colors.amber,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    letterSpacing: 2,
    decoration: TextDecoration.underline,
    decorationColor: Colors.green,
);
static const _bodies = [
    Text(
        'aaa',
        style: _style,
    ),
    Text(
        'bbb',
        style: _style,
    ),
    Text(
        'ccc',
        style: _style,
    ),
];
static const _bottomNavItems = [
    BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'ホーム',
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.notifications),
        label: '通知',
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'プロフィール',
    ),
];

void _onItemTapped(int index) {
    setState(() {
        _selectedIndex = index;
    });
}


Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Center(
        child: _bodies[_selectedIndex],
        ),
        bottomNavigationBar: BottomNavigationBar(
            items: _bottomNavItems,
            onTap: _onItemTapped,
            currentIndex: _selectedIndex,
            selectedItemColor: Colors.amber,
            unselectedItemColor: Colors.grey,
        ),
    );
}

Drawer

Scaffold(
    appBar: AppBar(),
    drawer: SizedBox(
        width: 200, // ドロワーの幅を指定可能
        child: Drawer(
            backgroundColor: Colors.lightBlue,
            child: ListView(
                padding: EdgeInsets.zero,
                children: const <Widget>[
                    DrawerHeader(
                        decoration: BoxDecoration(
                            color: Colors.lightBlue,
                        ),
                        child: Text(
                            'Sample',
                            style: TextStyle(
                            color: Colors.white,
                            fontSize: 24,
                            ),
                        ),
                    ),
                    ListTile(
                        leading: Icon(Icons.message),
                        title: Text('Messages'),
                    ),
                    ListTile(
                        leading: Icon(Icons.account_circle),
                        title: Text('Profile'),
                    ),
                    ListTile(
                        leading: Icon(Icons.settings),
                        title: Text('Settings'),
                    ),
                ],
            ),
        ),
    ),
)

SliverAppBar

Scaffold(
    body: CustomScrollView(
        slivers: [
            const SliverAppBar(
                pinned: true, // 下スクロールした際に上部固定するか
                floating: true, // 上部スクロール時、すぐにAppBar全体表示させるか
                snap: true, // floatingがtrueの場合のみtrueにできる。スクロール停止時、上部スクロールによって表示されたAppBar全体表示を戻すか
                expandedHeight: 160,
                flexibleSpace: FlexibleSpaceBar(
                    title: Text('SliverAppBar Sample'),
                    background: FlutterLogo(),
                ),
            ),
            SliverList(
                delegate: SliverChildBuilderDelegate(
                    (context, index) {
                        return Container(
                            color: index.isOdd ? Colors.white : Colors.black12,
                            height: 100,
                            child: Center(
                            child: Text(
                                '$index',
                                textScaleFactor: 5,
                            ),
                            ),
                        );
                    },
                    childCount: 20,
                ),
            ),
        ],
    ),
)

TabBar

DefaultTabController(
    initialIndex: 0,
    length: 3,
    child: Column(
        children: [
            hSpace(30),
            const TabBar(
                tabs: [
                    Text('first'),
                    Text('second'),
                    Text('third'),
                ],
                labelColor: Colors.black,
                unselectedLabelColor: Colors.black26,
                labelPadding: EdgeInsets.only(
                    bottom: 10, // bottom指定することで、ラベルとインジケーター間の余白を指定
                ),
                indicatorColor: Colors.amber,
            ),
            const Expanded(
                child: TabBarView(
                    // 通常は横スワイプでviewが切り替わるが、以下のようにすることで横スワイプを無効化できる
                    physics: ScrollPhysics(
                        parent: NeverScrollableScrollPhysics(),
                    ),
                    children: [
                        Center(
                            child: Text('first view'),
                        ),
                        Center(
                            child: Text('second view'),
                        ),
                        Center(
                            child: Text('third view'),
                        ),
                    ],
                ),
            ),
        ],
    ),
)

DropdownButton

String? val = 'first';


Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Center(
            child: DropdownButton<String>(
                value: val,
                style: const TextStyle(
                    color: Colors.black,
                ),
                icon: const Icon(Icons.arrow_downward),
                underline: Container(
                height: 2,
                color: Colors.indigo,
                ),
                dropdownColor: Colors.indigo[100],
                onChanged: (str) {
                    setState(() {
                        val = str;
                    });
                },
                items: <String>['first', 'second', 'third', 'fourth']
                    .map<DropdownMenuItem<String>>(
                    (String value) {
                        return DropdownMenuItem<String>(
                            value: value,
                            child: Text(value),
                        );
                    },
                ).toList(),
            ),
        ),
    );
}

ElevatedButton

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        const ElevatedButton(
            onPressed: null,
            child: Text('Disabled'),
        ),
        SizedBox(
            width: 150,
            height: 80,
            child: ElevatedButton(
            onPressed: () {},
            onLongPress: () {},
            style: ElevatedButton.styleFrom(
                elevation: 5,
                shadowColor: Colors.indigo,
                primary: Colors.red,
                side: const BorderSide(
                color: Colors.brown,
                width: 2,
                ),
                // 角丸化
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(40),
                ),
            ),
            child: const Text('Enabled'),
            ),
        ),
    ],
)

FloatingActionButton

丸形

FloatingActionButton(
    onPressed: () {},
    foregroundColor: Colors.yellow,
    backgroundColor: Colors.green,
    mini: false, // trueにすると小さくなる
    isExtended: true,
    child: const Icon(Icons.navigation),
)

角丸型

SizedBox(
    width: 200,
    height: 50,
    child: FloatingActionButton.extended(
        onPressed: () {},
        foregroundColor: Colors.white,
        backgroundColor: Colors.pink,
        isExtended: true,
        label: const Text('LGTM'),
        icon: const Icon(Icons.thumb_up_alt),
    ),
)

IconButton

背景なし

IconButton(
    iconSize: 60,
    color: Colors.pink,
    icon: const Icon(Icons.favorite),
    onPressed: () {},
)

背景あり

// Inkで囲ってあげるといい感じの背景を表示してくれる
Ink(
    padding: const EdgeInsetsDirectional.all(15),
    decoration: const ShapeDecoration(
        color: Colors.pink,
        shape: CircleBorder(),
    ),
    child: IconButton(
        // splashColorとhithlightColorにtransparentを指定することで、タップ時のリップルエフェクトを無効化できる
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
        iconSize: 40,
        color: Colors.white,
        icon: const Icon(Icons.favorite),
        onPressed: () {},
    ),
)

OutlinedButton

SizedBox(
    width: 200,
    height: 50,
    child: OutlinedButton(
        onPressed: () {},
        onLongPress: () {},
        style: OutlinedButton.styleFrom(
            backgroundColor: Colors.pink[100],
            side: const BorderSide(
                color: Colors.indigo,
            ),
            splashFactory: NoSplash.splashFactory, // タップ時のリップルエフェクト無効化
        ),
        child: const Text('あいうえお'),
    ),
)

PopupMenuButton

enum Sports {
  soccer,
  baseball,
  basketball,
  swimming,
}

PopupMenuButton(
    onSelected: print,
    itemBuilder: (BuildContext context) => <PopupMenuEntry<Sports>>[
        const PopupMenuItem(
            value: Sports.soccer,
            child: Text('soccer'),
        ),
        const PopupMenuItem(
            value: Sports.baseball,
            child: Text('baseball'),
        ),
        const PopupMenuItem(
            value: Sports.basketball,
            child: Text('basketball'),
        ),
        const PopupMenuItem(
            value: Sports.swimming,
            child: Text('swimming'),
        ),
    ],
)

TextButton

TextButton(
    onPressed: () {},
    style: TextButton.styleFrom(
        splashFactory: NoSplash.splashFactory,
    ),
    child: const Text('BUTTON'),
)

Checkbox


// SizedBoxなどではチェックボックスのサイズを変えられないためTransform.scaleで変更
Transform.scale(
    scale: 3,
    child: Checkbox(
        value: _result,
        onChanged: (result) {
            setState(() {
                _result = !_result;
            });
        },
    ),
),
const SizedBox(
    height: 20,
),
Transform.scale(
    scale: 3,
    child: Checkbox(
        activeColor: Colors.orange,
        shape: const CircleBorder(),
        checkColor: Colors.purple,
        splashRadius: 0, // タップ時のエフェクト無効化
        value: _result,
        onChanged: (result) {
            setState(() {
                _result = !_result;
            });
        },
        // 非チェック(false)時のスタイル
        side: const BorderSide(
            color: Colors.red,
        ),
    ),
)

※Columnの中に記述してます

DatePicker

final _nowYear = DateTime.now().year;
Future<void> _showDatePicker() async {
    final _date = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      // 5年前まで選択可能
      firstDate: DateTime(_nowYear - 5),
      // 5年後まで選択可能
      lastDate: DateTime(_nowYear + 5),
      helpText: '選択して下さい',
      cancelText: 'キャンセル',
      confirmText: '確定',
      initialDatePickerMode: DatePickerMode.year,
    );
}

ElevatedButton(
    onPressed: _showDatePicker,
    child: const Text('選択'),
)

TimePicker

Future<void> _showTimePicker() async {
    final _time = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
      helpText: '選択して下さい',
      cancelText: 'キャンセル',
      confirmText: '確定',
    );
}

ElevatedButton(
    onPressed: _showTimePicker,
    child: const Text('選択'),
)

Radio

enum Gender {
  male,
  female,
  other,
}

Gender? _selectedGender = Gender.male;

return Scaffold(
    appBar: AppBar(),
    // 未選択時の色はテーマのプロパティで指定しなければならず、ちょいめんどい
    body: MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          unselectedWidgetColor: Colors.pink,
        ),
        home: Column(
            children: [
                ListTile(
                    title: const Text('男性'),
                    leading: Radio(
                        value: Gender.male,
                        groupValue: _selectedGender,
                        onChanged: (Gender? value) {
                            setState(() {
                                _selectedGender = value;
                            });
                        },
                        activeColor: Colors.indigo,
                    ),
                ),
                ListTile(
                    title: const Text('女性'),
                    leading: Radio(
                        value: Gender.female,
                        groupValue: _selectedGender,
                        onChanged: (Gender? value) {
                            setState(() {
                                _selectedGender = value;
                            });
                        },
                        activeColor: Colors.indigo,
                    ),
                ),
                ListTile(
                    title: const Text('その他'),
                    leading: Radio(
                        value: Gender.other,
                        groupValue: _selectedGender,
                        onChanged: (Gender? value) {
                            setState(() {
                                _selectedGender = value;
                            });
                        },
                        activeColor: Colors.indigo,
                    ),
                ),
            ],
        ),
    ),
);

Slider

double _currentVal = 50;

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        const Icon(
            Icons.volume_off,
            color: Colors.indigo,
        ),
        Slider(
            value: _currentVal,
            min: 0,
            max: 100,
            onChanged: (val) {
                setState(() {
                    _currentVal = val;
                });
            },
            activeColor: Colors.indigo,
            inactiveColor: Colors.indigo[100],
        ),
        const Icon(
            Icons.volume_up,
            color: Colors.indigo,
        ),
    ],
)

Switch

bool _enableEmailNotification = false;
bool _enablePushNotification = false;

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        const Text('メール通知'),
        Switch(
            value: _enableEmailNotification,
            activeColor: Colors.amber,
            onChanged: (val) {
                setState(() {
                    _enableEmailNotification = val;
                });
            },
        ),
    ],
),
Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        const Text('プッシュ通知'),
        Switch(
            value: _enablePushNotification,
            activeColor: Colors.deepOrange,
            inactiveThumbColor: Colors.grey[300],
            inactiveTrackColor: Colors.grey[200],
            onChanged: (val) {
                setState(() {
                    _enablePushNotification = val;
                });
            },
        ),
    ],
)

TextField

final _emailController = TextEditingController();
final _passwordController = TextEditingController();
bool _hidePassword = true;

// メールアドレスフィールド
TextField(
    controller: _emailController,
    keyboardType: TextInputType.emailAddress,
    decoration: const InputDecoration(
        labelText: 'メールアドレス',
        labelStyle: TextStyle(
            color: Colors.teal,
        ),
        floatingLabelStyle: TextStyle(
            color: Colors.red,
        ),
        prefixIcon: Icon(Icons.email),
        focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(
                color: Colors.indigoAccent,
            ),
        ),
    ),
    cursorColor: Colors.indigoAccent,
)

// パスワードフィールド
TextField(
    controller: _passwordController,
    keyboardType: TextInputType.visiblePassword,
    decoration: InputDecoration(
        labelText: 'パスワード',
        enabledBorder: const OutlineInputBorder(),
        focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(
                color: Colors.indigoAccent,
            ),
        ),
        suffixIcon: GestureDetector(
        onTap: () {
            setState(() {
                _hidePassword = !_hidePassword;
            });
        },
        child: _hidePassword
            ? const Icon(
                Icons.visibility,
                )
            : const Icon(Icons.visibility_off),
        ),
    ),
    obscureText: _hidePassword, // 文字を隠す
    keyboardAppearance: Brightness.light,
)

AlertDialog

Future<void> _showMyDialog() async {
    return showDialog(
        context: context,
        barrierDismissible: true, // falseにすると画面タップでモーダルが閉じなくなる
        barrierColor: Colors.black87, // モーダルの背景色
        builder: (BuildContext context) {
            return AlertDialog(
                title: const Text('削除して宜しいですか?'),
                content: const Text('削除すると元に戻せません'),
                actions: [
                    TextButton(
                        child: const Text(
                            'キャンセル',
                            style: TextStyle(color: Colors.black),
                        ),
                        onPressed: () {
                            Navigator.pop(context);
                        },
                    ),
                    TextButton(
                        child: const Text(
                            '削除',
                            style: TextStyle(color: Colors.red),
                        ),
                        onPressed: () {
                            Navigator.pop(context);
                        },
                    ),
                ],
            );
        },
    );
}

ElevatedButton(
    onPressed: _showMyDialog,
    child: const Text('表示'),
)

SimpleDialog



Future<void> _showMyDialog() async {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
            /*
            一般的な使い方ではないかもしれないが、デフォルトのパディングを無効化してtitleプロパティにColumnでウィジェットを並べる方法をよく使っている。
            こうすることでデフォルトの余白などに邪魔されず、自由にUI作成が出来るため
            insetPaddingとMediaQuery.of(context).size.widthの組み合わせにより、画面両端からダイアログまでの余白を定義できる。
            */
            return SimpleDialog(
                title: SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: 300,
                    child: Padding(
                        padding: const EdgeInsets.all(10),
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                                const Center(
                                    child: Text('Flutterとは'),
                                ),
                                hSpace(20),
                                const Text(
                                    'Flutter(フラッター)は、Googleによって開発されたフリーかつオープンソースのUIのSDKである。単一のコードベース[4]から、Android、iOS、Linux、macOS、Windows、Google Fuchsia[5][6]向けのクロスプラットフォームアプリケーションを開発するために利用される。',
                                    style: TextStyle(fontSize: 14),
                                ),
                            ],
                        ),
                    ),
                ),
                titlePadding: EdgeInsets.zero,
                contentPadding: EdgeInsets.zero,
                insetPadding: const EdgeInsets.symmetric(horizontal: 20),
            );
        },
    );
}

BottomSheet

Future<void> _showMyDialog() async {
    return showModalBottomSheet(
        context: context,
        builder: (context) {
            return Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                    ListTile(
                        leading: const Icon(Icons.share),
                        title: const Text('Share'),
                        onTap: () => Navigator.pop(context),
                    ),
                    ListTile(
                        leading: const Icon(Icons.link),
                        title: const Text('Link'),
                        onTap: () => Navigator.pop(context),
                    ),
                    ListTile(
                        leading: const Icon(Icons.edit),
                        title: const Text('Edit'),
                        onTap: () => Navigator.pop(context),
                    ),
                    ListTile(
                        leading: const Icon(Icons.delete),
                        title: const Text('Delete'),
                        onTap: () => Navigator.pop(context),
                    ),
                    hSpace(20),
                ],
            );
        },
    );
}

ElevatedButton(
    onPressed: _showMyDialog,
    child: const Text('表示'),
)

ExpansionTile

ExpansionTile(
    onExpansionChanged: (bool changed) {
        // 開閉時の処理
    },
    title: const Text('アコーディオン的なやつ'),
    leading: const Icon(Icons.info),
    children: [
        Row(
            children: const [
                Checkbox(
                    value: false,
                    onChanged: print,
                ),
                Text('aaaaa'),
            ],
        ),
        Row(
            children: const [
                Checkbox(
                    value: true,
                    onChanged: print,
                ),
                Text('bbbbb'),
            ],
        ),
        Row(
            children: const [
                Checkbox(
                    value: false,
                    onChanged: print,
                ),
                Text('ccccc'),
            ],
        ),
    ],
)

SnackBar

void _showSnackBar() {
    ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
            content: const Text('表示に成功しました'),
            action: SnackBarAction(
                label: 'アクション',
                textColor: Colors.greenAccent,
                onPressed: () {
                    // アクションボタンタップ時の処理
                },
            ),
            backgroundColor: Colors.orange,
            duration: const Duration(seconds: 2), // スナックバーが自動で閉じるまでの時間。デフォルトは4秒
        ),
    );
}

TextButton(
    onPressed: _showSnackBar,
    child: const Text('表示'),
)

Card

Stack(
    alignment: AlignmentDirectional.topEnd,
    children: [
        Card(
            color: Colors.yellow[100],
            child: InkWell(
                splashColor: Colors.greenAccent.withAlpha(50),
                highlightColor: Colors.transparent,
                onTap: () {
                    // タップ時の処理
                },
                child: const SizedBox(
                    width: 300,
                    height: 100,
                    child: Center(
                        child: Text('カードウィジェットサンプル'),
                    ),
                ),
            ),
        ),
        Padding(
            padding: const EdgeInsets.only(right: 10),
            child: GestureDetector(
                onTap: () {
                    setState(() {
                        _isBookmarked = !_isBookmarked;
                    });
                },
                child: Icon(
                    _isBookmarked
                        ? Icons.bookmark_sharp
                        : Icons.bookmark_outline_sharp,
                    color: Colors.green,
                    size: 28,
                ),
            ),
        ),
    ],
)

Chip

// Wrapで囲むと子要素が親要素の幅を超えた場合に自動改行してくれる
Wrap(
    children: [
        const Chip(
            label: const Text('オムライス'),
        ),
        Chip(
            label: const Text('カレーライス'),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
            ),
        ),
        const Chip(
            label: Text('ハンバーグ'),
            shape: BeveledRectangleBorder(),
        ),
        const Chip(
            label: Text('鳥の唐揚げ'),
            padding: EdgeInsets.all(10),
            side: BorderSide(
                color: Colors.black,
            ),
        ),
        Chip(
            label: const Text(
                '焼肉',
                style: TextStyle(
                color: Colors.white,
                ),
            ),
            avatar: const Icon(
                Icons.check,
                color: Colors.white,
            ),
            deleteIcon: Icon(
                Icons.delete,
                color: Colors.red[200],
            ),
            backgroundColor: Colors.purple,
            onDeleted: () {
                // deleteIconタップ時の処理
            },
        ),
    ],
)

CircularProgressIndicator

SizedBox(
    width: 150,
    height: 150,
    child: CircularProgressIndicator(
        color: Colors.cyan,
        backgroundColor: Colors.pink[50],
        strokeWidth: 5, // 線の太さ
    ),
)

GridView

GridView.count(
    crossAxisCount: 2, // 横に並べる個数
    mainAxisSpacing: 5,
    crossAxisSpacing: 5,
    children: [
        Container(
            color: Colors.cyan,
        ),
        Container(
            color: Colors.indigo,
        ),
        Container(
            color: Colors.red,
        ),
        Container(
            color: Colors.blue,
        ),
        Container(
            color: Colors.pink,
        ),
        Container(
            color: Colors.orange,
        ),
        Container(
            color: Colors.purple,
        ),
        Container(
            color: Colors.green,
        ),
        Container(
            color: Colors.grey,
        ),
        Container(
            color: Colors.amber,
        ),
        Container(
            color: Colors.black45,
        ),
    ],
)

LinearProgressIndicator

SizedBox(
    width: 300,
    height: 5,
    child: LinearProgressIndicator(
        color: Colors.cyan,
        backgroundColor: Colors.pink[50],
    ),
)

Icon

Icon(
    Icons.settings,
    size: 50,
    color: Colors.blue,
)

アイコンを探す際はこちらを参考に
https://api.flutter.dev/flutter/material/Icons-class.html

Image

ローカル画像

Image.asset(
    'assets/images/lion.png',
    width: 200,
    height: 200,
    fit: BoxFit.cover,
),

pubspec.yamlに下記のような記述を追加し、事前にassets/imagesディレクトリに画像を配置する必要あり

flutter:
  uses-material-design: true

  # ここを追加
  assets:
    - assets/images/

リソースについて

https://wasabeef.medium.com/fluttergen-25149caea94f
下記のように書けるようになり、エディタの補完も効きます😊

Assets.images.lion.image(
    width: 200,
    height: 200,
    fit: BoxFit.cover,
)

ネット上の画像

Image(
    image: NetworkImage(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
    ),
    width: 200,
    height: 200,
    fit: BoxFit.fill,
)

Discussion