Flutter package that makes turning a FAB into a text field easy

  packages, Packages, Text, Text Field

flutter_text_field_fab

A simple Flutter widget that makes turning a FAB into a text field easy.

Installation

dependencies:
  flutter:
    sdk: flutter
  flutter_text_field_fab: <last-version>

Features

  • Simple slide animation
  • Custom icon
  • Custom coloring

Example

Simple Usage

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

class SomeListView extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            floatingActionButton: TextFieldFloatingActionButton(
                'Search...',
                Icons.gamepad,
                onChange: (String query) => filterList(query),
                onClear: () => clearList(),
            ),
            body: ...);
    }
}

Documentation

ParametersValueRequiredDocs
labelStringYesLabel to be the placeholder for the TextField
iconIconDataYesIcon for the FAB
backgroundColorColorNoThe background color of the FAB (defaults to white)
iconColorColorNoThe color of the of the icon (defaults to black)
onChangeFunctionNoonChange handler on keystroke input
onSubmitFunctionNoonSubmit handler input submission
onClearFunctionNoonClear handler for when the input is closed
pub.dev

Download flutter text field fab source code on GitHub

https://github.com/haefele-software/flutter_text_field_fab