CSSだけじゃなくFlutterも完全に理解しよう

皆さまはCSSを完全に理解できていますか？それともちょっとできる人ですか？

最近TwitterでよくCSSを完全に理解していて、それをグッズ化してる人を見かけます

CSS完全に理解したTシャツ

僕はFlutterが好きなのでFlutterを完全に理解したいと思います。

完全に理解したいのでデフォルトアプリを改良する程度に収めておきます。

枠の作成

main.dart
Container(
              padding: EdgeInsets.all(5.0),
              width: 200,
              height: 25,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                borderRadius: BorderRadius.circular(10),
              ),
            ),

枠がAppbarに密着ぃてるあたり、完全に理解したポイントが高いですね！！

テキストの表示

Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(width: 50,),
            Text('Flutter完全に理解した',style: TextStyle(fontSize: 20)),
          ],
        );

ちょっとできるような人はもっと効率よく空間を作れるかもしれませんが僕は完全に理解してるのでSizedBoxでスペースを空けました。

重ねてみよう

Stackでラップしましょう

Stack(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(5.0),
              width: 200,
              height: 30,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                borderRadius: BorderRadius.circular(10),
              ),
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(width: 50,),
                Text('Flutter完全に理解した',style: TextStyle(fontSize: 20)),
              ],
            ),
          ],
        ),

完成！！

せっかくなのでFlutterへの理解を増やしましょう！

サンプルアプリの_incrementCounter()を利用して理解を増やしたいので理解のテキストを増やします。いっぱい増やすことになるのでクラスにしちゃいましょう。

class Rikai extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(width: 50,),
            Text('Flutter完全に理解した',style: TextStyle(fontSize: 20)),
          ],
        );
      }
    }

増やした理解は配列に入れてListView.builderで表示させましょう。
枠もdouble型の変数にして30ずつ大きくしましょう。

List<Widget> rikaisita = [
    Rikai(),
  ];
  double waku = 30;

  void _incrementCounter() {
    setState(() {
      if (rikaisita.length <= 20) {
        rikaisita.add(
          Rikai(),
        );
        waku = waku + 30;
      } else if (rikaisita.length > 20) {
        rikaisita = [
          Rikai(),
        ];
        waku = 30;
      }
    });
  }

ListView.builder(
            itemCount: rikaisita.length,
            itemBuilder: (BuildContext context, int index) {
              return rikaisita[index];
            },
          ),

Flutterを完全に理解してる皆さまならきっと簡単だと思いますが完成品と最後に全てのコードを載せます。

Flutter完全に理解した

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter完全に理解した',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter完全に理解した'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> rikaisita = [
    Rikai(),
  ];
  double waku = 30;

  void _incrementCounter() {
    setState(() {
      if (rikaisita.length <= 20) {
        rikaisita.add(
          Rikai(),
        );
        waku = waku + 30;
      } else if (rikaisita.length > 20) {
        rikaisita = [
          Rikai(),
        ];
        waku = 30;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(5.0),
            width: 200,
            height: waku,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          ListView.builder(
            itemCount: rikaisita.length,
            itemBuilder: (BuildContext context, int index) {
              return rikaisita[index];
            },
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class Rikai extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          width: 50,
        ),
        Text('Flutter完全に理解した', style: TextStyle(fontSize: 20)),
      ],
    );
  }
}