GSInput

The GSInput widget is your go-to tool for gathering user input in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered.

API Reference

This is an illustration of a Themed GSInput widget with default configuration.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSInput(
      size: GSInputSizes.$md,
      variant: GSInputVariants.outline,
      hintText: "Enter text here",
      isDisabled: false,
      isInvalid: false,
      isReadOnly: false,
      style: GSStyle(
        width: 300,
      ),
    )

API Reference

Import

To use this component in your project, include the following import statement in your file.

import "package:gluestack_ui/gluestack_ui.dart"

This section provides a comprehensive reference list for the widget parameters, detailing descriptions, properties, types, and default behavior for easy project integration.

GSInput

It inherits all the properties of Flutter's TextFormField widget.

Parameters	Type	Default	Description
isInvalid	bool	false	When true, the input displays an error state.
isDisabled	bool	false	When true, the input is disabled and cannot be edited.
isReadOnly	bool	false	If true, the input value cannot be edited.

Features

Keyboard support for actions.
Support for hover, focus and active states.
Option to add your styles or use the default styles.

Parameters

GSInput widget is created using TextFormField widget from flutter. It extends all the props supported by Flutter TextFormField widget and additionally the properties mentioned below.

GSInput

Name	Value	Default
size	xl \| lg \| md \| sm	md
variant	underlined \| outline \| rounded	outline

Note: These properties are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.

GSInput type password with FormControl

The GSInput widget integrates with an icon and a button, providing users with a comprehensive login window inside a FormControl layout.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSBox(
      style: GSStyle(
        width: 250,
        height: 300,
        borderRadius: 8,
        borderColor: $GSColors.blueGray300,
        padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 15),
      ),
      child: GSVStack(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const GSHeading(text: "Login"),
          const SizedBox(
            height: 20,
          ),
          const GSText(text: 'Email'),
          GSInput(
            style: GSStyle(
              width: 300,
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          const GSText(text: 'Password'),
          GSInput(
            obscureText: true,
            style: GSStyle(
              width: 300,
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          GSButton(
            style: GSStyle(),
            onPressed: () {},
            child: const GSButtonText(text: "Save"),
          ),
        ],
      ),
    )

GSInput with Icons

The GSInput with GSIcons is a variation of the GSInput widget that displays icons next to input field. It's commonly used in apps for a more visual representation of options and easier navigation.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSBox(
      style: GSStyle(
        width: 250,
        height: 100,
        padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 15),
      ),
      child: const GSInput(
        prefixIcon: GSIcon(icon: Icons.search),
        obscureText: true,
        hintText: 'Search...',
      ),
    )

Edit this page on GitHub

GSInput

API Reference

Import

Widget Parameters

GSInput

Features

Parameters

GSInput

GSInput type password with FormControl

GSInput with Icons