Flutter_text_box | Help Using Custom Editing Text with Hints

flutter_text_box

This package help to use custom edit text (TextBox) with label, icon.

Usage

Example link

To use this plugin, add flutter_text_box as a dependency in your pubspec.yaml file.

Hou to use this package

dependencies:
  flutter:
    sdk: flutter
  flutter_text_box: ^0.0.1 # 👈🏼 add this line

• Import the package to your main file

import 'package:flutter_text_box/flutter_text_box.dart';

TextBox types

• TextBox with Label
• TextBox with Icon

Title

TextBoxLabel({required this.label, required this.hint, required this.errorText, this.radius, this.inputType = TextInputType.text, this.obscure = false, required this.onSaved})

Icon

TextBoxIcon({required this.icon, required this.label, required this.hint, required this.errorText, this.radius = 4, this.accent = Colors.blue, this.inputType = TextInputType.text, this.obscure = false, required this.onSaved})

Example 1

TextBoxLabel(
  label: 'Fullname',
  hint: 'Please enter your fullname here',
  errorText: 'This field is requiered !',
  onSaved: (String value) { }, 
)

Example 2

TextBoxIcon(
  icon: Icons.email_outlined, 
  inputType: TextInputType.emailAddress,
  label: 'Email',
  hint: 'Please enter your email address here',
  errorText: 'This field is requiered !',
  onSaved: (String value) { }, 
),

TextBoxIcon(
  icon: Icons.lock_outlined, 
  inputType: TextInputType.number,
  obscure: true,
  label: 'Password', 
  hint: 'Please enter your password here', 
  errorText: 'This field is requiered !', 
  onSaved: (String value){ }
)

Screenshots

Global view Expanded view

For help getting started with TextBox package, view our Gith repository

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_text_box

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  flutter_text_box: ^0.0.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_text_box/flutter_text_box.dart';

example/example.dart

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

class ExampleComboBoxPage extends StatefulWidget {

  @override
  _ExampleComboBoxPageState createState() => _ExampleComboBoxPageState();
}

class _ExampleComboBoxPageState extends State<ExampleComboBoxPage> {
  final key = GlobalKey<FormState>();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 24),
        child: Form(
          key: key,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              TextBoxLabel(
                label: 'Fullname',
                hint: 'Please enter your fullname here',
                errorText: 'This field is requiered !',
                onSaved: (String value) { }, 
              ),
              SizedBox(height: 16),
              TextBoxIcon(
                icon: Icons.email_outlined, 
                inputType: TextInputType.emailAddress,
                label: 'Email',
                hint: 'Please enter your email address here',
                errorText: 'This field is requiered !',
                onSaved: (String value) { }, 
              ),
              SizedBox(height: 16),
              TextBoxIcon(
                icon: Icons.lock_outlined, 
                inputType: TextInputType.number,
                obscure: true,
                label: 'Password', 
                hint: 'Please enter your password here', 
                errorText: 'This field is requiered !', 
                onSaved: (String value){ }
              ),
              SizedBox(height: 16),
              TextButton(
                onPressed: () => submitForm(), 
                child: Text('Submit')
              )
            ],
          ),
        ),
      )
    );
  }

  submitForm(){
    final state = key.currentState;
      if (state!.validate()) {
        state.save();

        //!DO SOME THIS HERE...
      }
  }
}

Download Details:

Author: ChrisMukasa

Official Website: https://github.com/ChrisMukasa/flutter_text_box