Flutterドロップダウンテキストフィールド

Question

Flutterはまだ初めてです。マテリアルドロップダウンリストのテキストフィールドの例はありますか？私は Material Text Field の例を見ましたが、これを実装する方法に関するドキュメントのどこにも見つかりませんでした。これについてあなたの助けをありがとう。

Answer 1

「ドロップダウン」は、マテリアルデザインの例で参照されているテキストフィールドのデザインを説明するために使用している正しいWordではない場合があります。

Flutterで実装する方法は次のとおりです。

import 'package:flutter/material.Dart';

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

class TextFieldExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Field Example',
      home: HomePage(),
      theme: ThemeData(
        primaryColor: Colors.deepPurple,
        accentColor: Colors.white,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Field Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            //Material example
            TextField(
              decoration: InputDecoration(
                  filled: true,
                  hintText: 'Enter text',
                  labelText: 'Default text field'),
              controller: new TextEditingController(),
            ),
            SizedBox(
              height: 16.0,
            ),
            //Alternate
            TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Enter text',
                  labelText: 'Text field alternate'),
              controller: new TextEditingController(),
            ),
          ],
        ),
      ),
    );
  }
}

このサンプルアプリには、関連するラベルを縮小および拡張するテキストフィールドデザインの2つの異なる例が含まれています。

サンプルアプリのGIF-ここをクリック