패키지, 저장소 및 앱 카테고리 검색

패키지 상세v0.1.4

dropdown_formfield

폼 필드 내부에 드롭다운 버튼을 사용하는 드롭다운 폼 필드입니다.

30일 다운로드
317
좋아요
111
Pub 점수
40

패키지 설치

flutter pub add dropdown_formfield

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

Flutter 패키지로, 표준 폼 필드 스타일과 검증을 함께 제공하는 드롭다운 폼 필드 위젯을 제공합니다. 입력 상태, 오류 메시지 및 폼 제출 로직을 처리함으로써 폼에 드롭다운을 통합하는 것을 단순화합니다. 이 위젯은 null 안전성을 지원하며, Flutter의 폼 생태계 내에서 쉽게 사용할 수 있도록 설계되었습니다. 폼 레이아웃에 자연스럽게 통합되는 깔끔하고 재사용 가능한 드롭다운 컴포넌트가 필요할 때 특히 유용합니다.

사용 사례

  • 드롭다운 선택이 있는 폼 입력
  • 사용자 선택에 따라 동적 폼 필드
  • 사전 정의된 옵션을 가진 사용자 선호 설정
  • 카테고리 선택이 필요한 데이터 입력 양식
  • 검증 인식형 드롭다운 입력

주요 기능

  • Flutter Form 위젯과 통합
  • 검증 및 오류 메시지 지원
  • 재사용 가능한 드롭다운 컴포넌트
  • 값 바인딩을 위한 간단한 API
  • 널 안전성과 호환됩니다

적합한 대상

  • 양식 중심 앱을 개발하는 개발자
  • 일관된 폼 구성 요소가 필요한 팀
  • Flutter 폼 검증을 사용하는 프로젝트
  • 접근성 있는 드롭다운을 원하는 UI 디자이너
  • 동적 또는 조건부 폼 필드를 가진 앱

고려 사항

  • 드롭다운 항목 목록을 수동으로 처리해야 합니다
  • 기본 스타일링을 초과한 제한된 사용자 정의
  • 내장된 검색 또는 필터링 없음
  • 매우 큰 옵션 목록에는 적합하지 않습니다
  • 고급 기능을 위해 외부 패키지에 의존합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Donate - Buy Me A Coffee

Dropdown form field

A dropdown form field using a dropdown button inside a form field.

Demo

Features

  • Can be used as regular form field.
  • Simple to implement.
  • Simple and intuitive to use in the app.
  • Provides validation of data.
  • Provides requirement of the field.
  • Follows the app theme and colors.

Example

import 'package:dropdown_formfield/dropdown_formfield.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _myActivity;
  String _myActivityResult;
  final formKey = new GlobalKey<FormState>();

  @override
  void initState() {
    super.initState();
    _myActivity = '';
    _myActivityResult = '';
  }

  _saveForm() {
    var form = formKey.currentState;
    if (form.validate()) {
      form.save();
      setState(() {
        _myActivityResult = _myActivity;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown Formfield Example'),
      ),
      body: Center(
        child: Form(
          key: formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(16),
                child: DropDownFormField(
                  titleText: 'My workout',
                  hintText: 'Please choose one',
                  value: _myActivity,
                  onSaved: (value) {
                    setState(() {
                      _myActivity = value;
                    });
                  },
                  onChanged: (value) {
                    setState(() {
                      _myActivity = value;
                    });
                  },
                  dataSource: [
                    {
                      "display": "Running",
                      "value": "Running",
                    },
                    {
                      "display": "Climbing",
                      "value": "Climbing",
                    },
                    {
                      "display": "Walking",
                      "value": "Walking",
                    },
                    {
                      "display": "Swimming",
                      "value": "Swimming",
                    },
                    {
                      "display": "Soccer Practice",
                      "value": "Soccer Practice",
                    },
                    {
                      "display": "Baseball Practice",
                      "value": "Baseball Practice",
                    },
                    {
                      "display": "Football Practice",
                      "value": "Football Practice",
                    },
                  ],
                  textField: 'display',
                  valueField: 'value',
                ),
              ),
              Container(
                padding: EdgeInsets.all(8),
                child: RaisedButton(
                  child: Text('Save'),
                  onPressed: _saveForm,
                ),
              ),
              Container(
                padding: EdgeInsets.all(16),
                child: Text(_myActivityResult),
              )
            ],
          ),
        ),
      ),
    );
  }
}

License

This project is licensed under the BSD License. See the LICENSE file for details.

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.