トッカンソフトウェア

Flutter 入力項目

ボタン

lib\main.dart

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: OutlinedButton(
            onPressed: () {
              print("Hello World");
            },
            child: Text("Btn"),
          ),
        ),
      ),
    );
  }
}

実行結果

テキスト

lib\main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: Center(child: MyTextField())));
  }
}

class MyTextField extends StatefulWidget {
  @override
  State<MyTextField> createState() {
    return _MyTextFieldState();
  }
}

class _MyTextFieldState extends State<MyTextField> {
  final TextEditingController _controller = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      onChanged: (text) {
        print(text);
      },
    );
  }
}

実行結果

複数テキスト

lib\main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: Center(child: MyTextField())));
  }
}

class MyTextField extends StatefulWidget {
  @override
  State<MyTextField> createState() {
    return _MyTextFieldState();
  }
}

class _MyTextFieldState extends State<MyTextField> {
  final TextEditingController _controller1 = TextEditingController();
  final TextEditingController _controller2 = TextEditingController();

  @override
  void dispose() {
    _controller1.dispose();
    _controller2.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        TextField(controller: _controller1),
        TextField(controller: _controller2),
        OutlinedButton(
          onPressed: () {
            print(_controller1.text + ":" + _controller2.text);
          },
          child: Text("Btn"),
        ),
      ],
    );
  }
}

実行結果

setState

lib\main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: Center(child: MyTextField())));
  }
}

class MyTextField extends StatefulWidget {
  @override
  State<MyTextField> createState() {
    return _MyTextFieldState();
  }
}

class _MyTextFieldState extends State<MyTextField> {
  final TextEditingController _controller = TextEditingController();
  String _str = '';
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        TextField(
          controller: _controller,
          onChanged: (text) {
            setState(() {
              _str = text;
            });
          },
        ),
        Text(_str),
      ],
    );
  }
}

実行結果