Cupertino Search TextField In Flutter
Flutter’s Cupertino search textfield is similar to the searchTextfield in iOS. We might foster a searchTextField in an iOS way using a cupertinoSearchTextField widget. Its purpose is to show a text box where the user can enter his search terms. The system will return the results based on the user’s query when the request is submitted.
Cupertino is a set of Flutter Widgets that follow the iOS design. The purpose of these widgets is to coordinate iOS functionalities into flutter apps made for the iOS stage.
This article will explore the Cupertino Search TextField In Flutter. We will see how to implement a demo program. We will learn how to use the Cupertino search textfield in flutter and also learn how to customize the CupertinoSearchTextField widget using different properties in your flutter applications.
CupertinoSearchTextField class – cupertino library – Dart API
A CupertinoTextField that mimics the look and behavior of UIKit’s UISearchTextField. This control defaults to showing…api. flutter.dev
Table Of Contents::
Introduction:
Cupertino search textfield in flutter is ios style (like) searchTextfield. It is used to display a text field where the user can type his search question. At the point when the user submits the query, it will return the results based on the query. Naturally, the widget will display basic things like a search icon in the prefix, a placeholder (search), and a close symbol (‘x’) in the suffix.
Demo Module ::
This demo video shows how to create a Cupertino search textfield in a flutter and shows how a Cupertino search textfield will work in your flutter applications. We will show a text box where the user can enter his search terms. The system will return the results based on the user’s query when the request is submitted. It will be shown on your device.
Constructor:
To utilize CupertinoSearchTextField, you need to call the constructor underneath:
To make a Cupertino search textfield in flutter we need to call the constructor of CupertinoSearchTextField class and give the necessary properties. There are no required properties for the Cupertino search textfield.
const CupertinoSearchTextField({
Key? key,
this.controller,
this.onChanged,
this.onSubmitted,
this.style,
this.placeholder,
this.placeholderStyle,
this.decoration,
this.backgroundColor,
this.borderRadius,
this.padding = const EdgeInsetsDirectional.fromSTEB(3.8, 8, 5, 8),
this.itemColor = CupertinoColors.secondaryLabel,
this.itemSize = 20.0,
this.prefixInsets = const EdgeInsetsDirectional.fromSTEB(6, 0, 0, 4),
this.prefixIcon = const Icon(CupertinoIcons.search),
this.suffixInsets = const EdgeInsetsDirectional.fromSTEB(0, 0, 5, 2),
this.suffixIcon = const Icon(CupertinoIcons.xmark_circle_fill),
this.suffixMode = OverlayVisibilityMode.editing,
this.onSuffixTap,
this.restorationId,
this.focusNode,
this.autofocus = false,
this.onTap,
this.autocorrect = true,
this.enabled,
})
We can make one by straightforwardly calling the constructor. The constructor has a lot of features that assist in customizing the search text with handling.
Properties:
There are some properties of CupertinoSearchTextField are:
- > onChanged — This property is used to accept a callback function that invokes each time the text of the textfield changes. We can get the changed text inside this function and use it as indicated by our needs. For instance, showing results coordinating or connected with the query.
- > onSubmitted — This property is used to accept a callback function that invokes when the user presses the send button or submits the query. We can get the submitted text inside this function and use it as indicated by our needs.
- > controller — This property is used to control the text that is being altered by the user. For instance, to display a search textfield with some text at first we can use the controller. Proclaim a controller and initialize it with some text.
- > onTap — This property is used to accept a callback function as the value. This function will invoke when the user taps on the search textfield. We can finish our desired task inside this capability which will set off when the user taps on the textfield.
- > enabled —This property is used to enable or disable the text field. Setting this property to true will enable and false will disable the search textfield. By default, it is true.
- > autoCorrect — This property is used to take a boolean as a value. To enable auto-correction of the text entered by the user we have to set this property to true.
- > autofocus — This property is used to take a boolean as a value. Setting this property to true will automatically focus the textfield and opens the keyboard to type.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main. dart file, we will add a new class MyHomePage. In this class, we will add a TextEditingController.
TextEditingController controller =
TextEditingController(text: "test");
In the body, we will add the Padding widget. In this widget, we will add the CupertinoSearchTextField() widget. Inside the widget, we will add the controller, onChanged, onSubmitted, and autocorrect.
Padding(
padding: const EdgeInsets.all(14.0),
child: CupertinoSearchTextField(
controller: controller,
onChanged: (value) {},
onSubmitted: (value) {},
autocorrect: true,
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_search_textfield_demo/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
TextEditingController controller =
TextEditingController(text: "test");
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Cupertino Search TextField Demo"),
automaticallyImplyLeading: false,
backgroundColor: Colors.blueGrey,
),
body: CupertinoPageScaffold(
backgroundColor: Colors.grey[200],
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(height: 20,),
Image.asset(
"assets/logo.png",
height: 300,
width: 350,
),
const SizedBox(height: 30,),
Padding(
padding: const EdgeInsets.all(14.0),
child: CupertinoSearchTextField(
controller: controller,
onChanged: (value) {},
onSubmitted: (value) {},
autocorrect: true,
),
),
],
),
),
),
);
}
}
Conclusion:
In the article, I have explained Cupertino Search TextField’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino Search TextField On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Cupertino Search TextField in your flutter projects. We will show you what the Introduction is. Make a demo program for working with Cupertino Search TextField and you’ve learned how to create & use Cupertino search textfield in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
