【Flutter】クレヨンしんちゃん風のタイトル作成アプリをつくってみた

import 'package:flutter/material.dart';
import 'crayon_title_page.dart';

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

  @override
  State<CrayonInputPage> createState() => _CrayonInputPage();
}

class _CrayonInputPage extends State<CrayonInputPage> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('タイトルの入力'),
      ),
      body: SizedBox(
        width: double.infinity,
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(30.0),
              child: TextField(
                controller: _controller,
              ),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => CrayonTitlePage(title: _controller.text)),
                );
              },
              child: const Text('OK'),
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

  @override
  State<CrayonTitlePage> createState() => _StatefulTemplatePage();
}

class _StatefulTemplatePage extends State<CrayonTitlePage> {
  @override
  void didChangeDependencies() async {
    await SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
    await SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
    super.didChangeDependencies();
  }

  @override
  void dispose() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: FractionalOffset.topCenter,
            end: FractionalOffset.bottomCenter,
            colors: [
              Color(0xFFFF80A6),
              Color(0xFFFFFE82),
            ],
            stops: [
              0.0,
              1.0,
            ],
          ),
        ),
        child: Center(
            child: SafeArea(
              child: Padding(
                padding: const EdgeInsets.all(50.0),
                child: Text('${widget.title}ゾ',
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                    color: Color(0xFF5F5AA8),
                    fontSize: 60,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            )
        ),
      ),
    );
  }
}