クレヨンしんちゃん(Flutter)

クレヨンしんちゃんの記事を見て、Flutterで作りたくなったので、３０分で作成してみました。

※注意
クオリティーが低いです。なぜなら、他の方よりも早く上げようと思ったため短時間で作成してみました。投稿後に修正しようと思います。。。すみません。先に謝っておきます。。

キャンバスサイズの設定

BoxDecoration(
  gradient: LinearGradient(
  begin: Alignment.topCenter,
  end: Alignment.bottomCenter,
  colors: <Color>[
    Color(0xFFEE7D97),
    Color(0xFFffcc00),
  ],
),

タイトルの設定

・タイトルを設定する上で、Columnを使用してもいいが、今回は、/nと「　」を使用して代用。

Text(
  'ホットリロード\n'
  '　　めっちゃ便利だゾ',//全角の空白を２つ空けています。
    style: TextStyle(
    //文字の装飾の設定
    fontSize: 30,
    fontWeight: FontWeight.bold,
    color: Color(0xFF5B1152),
  ),
),

テキストと画像の２つができたので、重ねたいと思います。
そこで使えるものがStackです。

Stack(
  children: [
    Center(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height / 3,
          decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: <Color>[
              Color(0xFFEE7D97),
              Color(0xFFFFCC00),
            ],
          ),
        ),
      ),
    ),
    const Center(
      child: Text(
        'ホットリロード\n'
        '　　めっちゃ便利だゾ',
          style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Color(0xFF5B1152),
          ),
        ),
      ),
    ],
  ),

完成したコード

以下のコードをコピペすることで簡単にできます。

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 Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        children: [
          Center(
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height / 3,
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: <Color>[
                    Color(0xFFEE7D97),
                    Color(0xFFffcc00),
                  ],
                ),
              ),
            ),
          ),
          const Center(
            child: Text(
              'ホットリロード\n'
              '　　めっちゃ便利だゾ',
              style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Color(0xFF5B1152),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

最後に、

僕が作成したものよりもおそらくいいものがたくさんあると思います。Flutterでこんなことができるのかと知ってもらえるだけで嬉しいです。