FlutterのMaterial Widgetを使ってみる

薄田達哉 / tatsuyasusukida 2022/11/25

はじめに

公式リファレンスからMaterial Widgetの中から基本的なクラスをピックアップして使ってみる

動作確認にはDartPadを使用する

https://dartpad.dev/

薄田達哉 / tatsuyasusukida 2022/11/25に更新

StatelessWidget

コード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text("Hello World"),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25に更新

StatefulWidget

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text("Count $count"),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Text("+"),
          onPressed: () {
            setState(() {
              count += 1;
            });
          },
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25に更新

MaterialApp

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      routes: {
        "/": (context) => Scaffold(
          appBar: AppBar(title: const Text("Home")),
          body: Center(
            child: TextButton(
              child: const Text("Go to A"),
              onPressed: () {
                Navigator.pushNamed(context, "/a");
              },
            ),
          ),
        ),
        "/a": (context) => Scaffold(
          appBar: AppBar(title: const Text("A")),
        ),
      }
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25に更新

Scaffold

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("App Bar Tilte")),
        body: const Center(
          child: Text("Body"),
        ),
        bottomNavigationBar: const BottomAppBar(
          shape: CircularNotchedRectangle(),
          child: SizedBox(
            height: 50.0,
            child: Center(
              child: Text("Bottom App Bar"),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Text("+"),
          onPressed: () {},
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25に更新

Container

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            alignment: Alignment.center,
            color: Colors.amber,
            width: 50.0,
            height: 50.0,
            transform: Matrix4.rotationZ(0.1),
            child: const Text("Text"),
          ),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25

Row

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });

  @override
  Widget build(BuildContext context) {
    const style = TextStyle(fontSize: 50);
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: const [
              Expanded(
                child: Text("1", style: style),
              ),
              Expanded(
                child: Text("2", style: style),
              ),
              Expanded(
                child: Text("3", style: style),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25

Column

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });

  @override
  Widget build(BuildContext context) {
    const style = TextStyle(fontSize: 50);
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: const [
              Expanded(
                child: Text("1", style: style),
              ),
              Expanded(
                child: Text("2", style: style),
              ),
              Expanded(
                child: Text("3", style: style),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25

Stack

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 75,
              height: 75,
              color: Colors.green,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25

SizedBox

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 100,
            height: 100,
            child: Container(color: Colors.amber),
          ),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25

Wrap

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Wrap(
          spacing: 8.0,
          runSpacing: 4.0,
          children: <Widget>[
            Chip(
              avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('AH')),
              label: const Text('Hamilton Hamilton'),
            ),
            Chip(
              avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('ML')),
              label: const Text('Lafayette Lafayette'),
            ),
            Chip(
              avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('HM')),
              label: const Text('Mulligan Mulligan'),
            ),
            Chip(
              avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('JL')),
              label: const Text('Laurens Laurens'),
            ),
          ],
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25

Expanded

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
              Expanded(
                child: Container(
                  width: 100,
                  color: Colors.yellow,
                ),
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25

Flexible

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Flexible(
              flex: 1,
              child: Container(
                color: Colors.blue,
              ),
            ),
            Flexible(
              flex: 2,
              child: Container(
                color: Colors.yellow,
              ),
            ),
            Flexible(
              flex: 1,
              child: Container(
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25

LayoutBuilder

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    final children = [
      Flexible(
        flex: 1,
        child: Container(color: Colors.blue),
      ),
      Flexible(
        flex: 1,
        child: Container(color: Colors.yellow),
      ),
    ];
    
    return MaterialApp(
      home: Scaffold(
        body: LayoutBuilder(
          builder: (context, constraints) {
            if (constraints.maxWidth > 500) {
              return Row(children: children);
            } else {
              return Column(children: children);
            }
          },
        )
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25

Center

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          widthFactor: 2.0,
          heightFactor: 2.0,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25

Align

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Align(
          alignment: Alignment(-0.9, -0.9),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/25

Padding

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: Container(
                color: Colors.blue,
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
                child: Container(
                  color: Colors.yellow,
                ),
              )
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
              ),
            ),
          ],
        )
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/26

AppBar

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("AppBar Title"),
          actions: [
            IconButton(
              icon: const Icon(Icons.add_alert),
              tooltip: "Show Snackbar",
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(Icons.navigate_next),
              tooltip: "Go to the Next Page",
              onPressed: () {},
            ),
          ],
        ),
        body: const Center(
          child: Text(
            "Body",
            style: TextStyle(fontSize: 50),
          ),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/26

BottomNavigationBar

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({ super.key });
  
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("AppBar Title"),
        ),
        body: const Center(
          child: Text(
            "Body",
            style: TextStyle(fontSize: 50),
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: "Home",
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: "Business",
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: "School",
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber,
          onTap: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/26

Drawer

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("AppBar Title"),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: const [
              DrawerHeader(
                child: Text("DrawerHeader"),
              ),
              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"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/27

Routes

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/": (context) => const HomeScreen(),
        "/details": (context) => const DetailScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Home")),
      body: Padding(
        padding: const EdgeInsets.all(10),
        child: Column(
          children: [
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(
                    context,
                    "/details",
                    arguments: const DetailScreenArguments(1),
                  );
                },
                child: const Text("Details 1"),
              ),
            ),
            const SizedBox(height: 5),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(
                    context,
                    "/details",
                    arguments: const DetailScreenArguments(2),
                  );
                },
                child: const Text("Details 2"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  const DetailScreen({ super.key });
  
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as DetailScreenArguments;
    
    return Scaffold(
      appBar: AppBar(title: const Text("Details")),
      body: Center(
        child: Text("Details of #${args.id}"),
      ),
    );
  }
}

class DetailScreenArguments {
  final int id;

  const DetailScreenArguments(this.id);
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/28

Dialogs

コード

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () => _showAboutDialog(context),
                child: const Text("About Dialog"),
              ),
            ),
            const SizedBox(height: 10),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () => _showAlertDialog(context),
                child: const Text("Alert Dialog"),
              ),
            ),
          ]
        ),
      ),
    );
  }
  
  void _showAboutDialog(BuildContext context) {
    showAboutDialog(
      context: context,
      applicationName: "MyApp",
      applicationVersion: "0.0.0",
    );
  }

  Future<void> _showAlertDialog(BuildContext context) async {
    final answer = await showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text("AlertDialog Title"),
        content: const Text("AlertDialog Content"),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, "Cancel"),
            child: const Text("Cancel"),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, "OK"),
            child: const Text("OK"),
          ),
        ],
      ),
    );
    
    print(answer);
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/28

Buttons

コード

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("AppBar Title"),
        actions: [
          PopupMenuButton<String>(
            itemBuilder: (context) => const [
              PopupMenuItem(
                value: "1",
                child: Text("1"),
              ),
              PopupMenuItem(
                value: "2",
                child: Text("2"),
              ),
              PopupMenuItem(
                value: "3",
                child: Text("3"),
              ),
            ],
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Wrap(
          crossAxisAlignment: WrapCrossAlignment.center,
          spacing: 10,
          children: [
            DropdownButton<String>(
              value: "1",
              onChanged: (String? value) {},
              items: const [
                DropdownMenuItem(value: "1", child: Text("1")),
                DropdownMenuItem(value: "2", child: Text("2")),
                DropdownMenuItem(value: "3", child: Text("3")),
              ],
            ),
            ElevatedButton(
              onPressed: () {},
              child: const Text("ElevatedButton"),
            ),
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.favorite),
            ),
            OutlinedButton(
              onPressed: () {},
              child: const Text("OutlinedButton"),
            ),
            TextButton(
              onPressed: () {},
              child: const Text("TextButton"),
            ),
          ],
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/28

TextField

コード

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: const [
            TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: "Label",
              ),
            ),
          ],
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/28に更新

Switch

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({ super.key });
  
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool enabled1 = true;
  bool enabled2 = true;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            Switch(
              value: enabled1,
              onChanged: (value) {
                setState(() {
                  enabled1 = !enabled1;
                });
              },
            ),
            SwitchListTile(
              title: const Text("SwitchListTile Tilte"),
              value: enabled2,
              onChanged: (value) {
                setState(() {
                  enabled2 = !enabled2;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29

Text

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text(
              "Hello, Ruth! How are you? "
              "Hello, Ruth! How are you? "
              "Hello, Ruth! How are you? "
              "Hello, Ruth! How are you? "
              "Hello, Ruth! How are you?",
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            Text.rich(
              TextSpan(
                text: "Hello",
                children: <TextSpan>[
                  TextSpan(
                    text: " beautiful ",
                    style: TextStyle(fontStyle: FontStyle.italic),
                  ),
                  TextSpan(
                    text: "world",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
          ],
        )
      )
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29に更新

Icon

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Row(
          children: const [
            Icon(
              Icons.favorite,
              color: Colors.pink,
              size: 24.0,
              semanticLabel: "Text to announce in accessibility modes",
            ),
            SizedBox(width: 20),
            Icon(
              Icons.audiotrack,
              color: Colors.green,
              size: 24.0,
            ),
            SizedBox(width: 20),
            Icon(
              Icons.beach_access,
              color: Colors.blue,
              size: 24.0,
            ),
          ],
        )
      )
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29

Image

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    const imageUrl = "https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg";

    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: const Center(
        child: Image(
          width: 400,
          height: 400,
          fit: BoxFit.cover,
          image: NetworkImage(imageUrl),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29

ListView

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: ListView.builder(
        padding: const EdgeInsets.all(20),
        itemBuilder: (context, index) {
          if (index % 2 == 0) {
            return Container(
              height: 50,
              color: index % 4 == 0 ? Colors.yellow : Colors.blue,
            );
          } else {
            return const Divider();
          }
        },
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29

SingleChildScrollView

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: SingleChildScrollView(
        child: Container(
          width: double.infinity,
          height: 1000,
          color: Colors.yellow,
          alignment: Alignment.center,
          child: const Text(
            "Center",
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29

GridView

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
        ),
        itemBuilder: (context, index) {
          return Container(
            color: _getColor(index),
          );
        },
      ),
    );
  }
  
  _getColor(int index) {
    switch (index % 8) {
      case 0: return Colors.amber;
      case 1: return Colors.blue;
      case 2: return Colors.cyan;
      case 3: return Colors.deepPurple;
      case 4: return Colors.green;
      case 5: return Colors.indigo;
      case 6: return Colors.lime;
      case 7: return Colors.orange;
    }
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29に更新

画像アセット

コマンド

flutter create hello_image_assets
mkdir -p assets/images
curl https://storage.googleapis.com/cms-storage-bucket/c823e53b3a1a7b0d36a9.png > assets/images/flutter_logo.png

ソースコード

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: const Center(
        child: Image(image: AssetImage("assets/images/flutter_logo.png")),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29

CircularProgressIndicator

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: const Center(
        child: CircularProgressIndicator(
          strokeWidth: 2,
          color: Colors.amber,
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29

LinearProgressIndicator

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({ super.key });
  
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp>
  with TickerProviderStateMixin {
  late AnimationController controller;
  
  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 5),
    )
      ..addListener(() => setState(() {}))
      ..repeat();

    super.initState();
  }
  
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: Center(
        child: LinearProgressIndicator(
          value: controller.value,
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29

RefreshIndicator

コード

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  final GlobalKey<RefreshIndicatorState> _key = GlobalKey<RefreshIndicatorState>();

  MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: RefreshIndicator(
        key: _key,
        onRefresh: () {
          return Future.delayed(const Duration(seconds: 3));
        },
        child: ListView(
          children: List<Widget>.generate(30, (i) {
            return const ListTile(
              title: Text("ListTile Title"),
            );
          }),
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          _key.currentState?.show();
        },
        icon: const Icon(Icons.refresh),
        label: const Text("Reload"),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29

TextTheme

コード

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: Center(
        child: Text(
          "Display Large",
          style: theme.textTheme.displayLarge,
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29

ButtonTheme

コード例

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.amber,
          foregroundColor: Colors.black,
        ),
      ),
    ),
    home: const MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("AppBar Title")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child:  const Text("ElevatedButton"),
        ),
      ),
    );
  }
}

実行結果

薄田達哉 / tatsuyasusukida 2022/11/29

以上で一旦クローズ、次はRiverpodを使ってみる

このスクラップは2023/01/10にクローズされました