There are a few chips characterized by Material Design, one of which is the input chip. Input chips are commonly used to address client input in a conservative structure or give ideas to the client. Besides label and avtar, an input chip can likewise have a delete icon. In Flutter, you can make that sort of chip utilizing the InputChip widget.

This blog will explore the Input Chip In Flutter. We perceive how to execute a demo program. We will learn how to use the Input Chip class in your flutter applications.

InputChip class – material library – Dart API
A material design input chip. Input chips represent a complex piece of information, such as an entity (person, place…api. flutter.dev

Table Of Contents::

Introduction

Constructor

Properties

Code Implement

Code File

Conclusion

Introduction:

InputChip is a material widget in a flutter that addresses a mind-boggling snippet of data in a conservative structure. Flutter gives a widget called InputChip which permits us to add an input chip to our application.

The input chip by default is disabled. We can empower it by setting onSelected. We can give a label, and leading and trailing symbols to it. Different kinds of chips are Chip, ChoiceChip, ActionChip, and FilterChip.

Demo Module ::

This demo video shows how to use the input chip in a flutter and shows how an input chip will work in your flutter applications. We will show a user press the chip, then the chip will be selected, and also the user will delete the chip. It will be shown on your devices.

Constructor:

To utilize InputChip, you need to call the constructor underneath:

To make an Input chip in the flutter we need to utilize the constructor of the InputChip class given by the flutter.

const InputChip({
  Key? key,
  this.avatar,
  required this.label,
  this.labelStyle,
  this.labelPadding,
  this.selected = false,
  this.isEnabled = true,
  this.onSelected,
  this.deleteIcon,
  this.onDeleted,
  this.deleteIconColor,
  this.deleteButtonTooltipMessage,
  this.onPressed,
  this.pressElevation,
  this.disabledColor,
  this.selectedColor,
  this.tooltip,
  this.side,
  this.shape,
  this.clipBehavior = Clip.none,
  this.focusNode,
  this.autofocus = false,
  this.backgroundColor,
  this.padding,
  this.visualDensity,
  this.materialTapTargetSize,
  this.elevation,
  this.shadowColor,
  this.selectedShadowColor,
  this.showCheckmark,
  this.checkmarkColor,
  this.avatarBorder = const CircleBorder(),
  @Deprecated(
    'Migrate to deleteButtonTooltipMessage. '
    'This feature was deprecated after v2.10.0-0.3.pre.'
  )
  this.useDeleteButtonTooltip = true,
})

One required property for the InputChip widget is the label property. The label can be any widget generally a text widget. To utilize the InputChip widget we need to furnish this property with a value.

Properties:

There are some properties of InputChip are:

• > selected — This property is utilized to set the chip’s state to be chosen or unselected. It takes a boolean value setting that truly will make the chip chosen and false will make the chip unselected.
• > onSelected — This property is utilized to update the selected or unselected state of the Input chip and perform some actions when the chip is selected or unselected.
• > isEnabled — This property is utilized to enable or disable the input chip. It takes a boolean value. By default the value is true. Regardless of whether we set this property to true, we need to set one of the callbacks onSelected, onDelete, or onPressed to enable the button.
• > disabledcolor — This property is utilized to apply a color to the inputChip when the chip is disabled we will utilize this property. So to disable the button I’m eliminating every one of the callbacks.
• > showCheckmark — This property is utilized to show/hide away the check mark that seems when we select the chip. It takes a boolean value.
• > pressElevation — This property is utilized to change the amount of elevation we want to apply when we press the chip.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called item_model.dart inside the lib folder.

First, we want an ItemModel class for holding the information of Inputchip. The ItemModel class will have three boundaries label, color, and isSelected. The label will hold the mark of the chip, the color will hold the backgroundColor and isSelected will hold the chosen or unselected condition of the Input chip.

import 'dart:ui';

class ItemModel {
  String label;
  Color color;
  bool isSelected;

  ItemModel(this.label, this.color, this.isSelected);
}

Create a new dart file called main.dart inside the lib folder.

In the main. dart file, we will create a new class MyHomePage(). In this class, we will first create a List of types ItemModel and provide the data for chips.

final List<ItemModel> _chips = [
  ItemModel("Android", Colors.green, false),
  ItemModel("Flutter", Colors.blueGrey, false),
  ItemModel("Ios", Colors.deepOrange, false),
  ItemModel("Python", Colors.cyan, false),
  ItemModel("React JS", Colors.teal, false),
];

In the body, we will add the Column widget. In this widget, we will add an image and wrap widget. In this widget, we will add direction was horizontal and its children were itemsChips() method.

Center(
    child: Column(
  children: [
    Image.asset(
      "assets/logo.png",
      height: 300,
      width: 350,
    ),
    Wrap(direction: Axis.horizontal, children: itemsChips()),
  ],
)),

Now we will deeply define itemsChips() method are:

This method was on the list of widgets. We will add the InputChip widget. In this widget, we will add an avatar, label, backgroundColor, selected, onDeleted, onSelected, and then return chips.

List<Widget> itemsChips() {
  List<Widget> chips = [];
  for (int i = 0; i < _chips.length; i++) {
    Widget item = Padding(
      padding: const EdgeInsets.only(left: 10, right: 5),
      child: InputChip(
        avatar: CircleAvatar(
          backgroundColor: Colors.white,
          child: Text(_chips[i].label[0].toUpperCase()),
        ),
        label: Text(_chips[i].label),
        labelStyle: const TextStyle(color: Colors.white),
        backgroundColor: _chips[i].color,
        selected: _chips[i].isSelected,
        onDeleted: () {
          setState(() {
            _chips.removeAt(i);
          });
        },
        onSelected: (bool value) {
          setState(() {
            _chips[i].isSelected = value;
          });
        },
      ),
    );
    chips.add(item);
  }
  return chips;
}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_input_chip_demo/item_model.dart';
import 'package:flutter_input_chip_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 MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      debugShowCheckedModeBanner: false,
      home: const Splash(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  final List<ItemModel> _chips = [
    ItemModel("Android", Colors.green, false),
    ItemModel("Flutter", Colors.blueGrey, false),
    ItemModel("Ios", Colors.deepOrange, false),
    ItemModel("Python", Colors.cyan, false),
    ItemModel("React JS", Colors.teal, false),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        title: const Text("Flutter Input Chip Demo"),
        centerTitle: true,
        automaticallyImplyLeading: false,
        backgroundColor: Colors.orangeAccent,
      ),
      body: Center(
          child: Column(
        children: [
          Image.asset(
            "assets/logo.png",
            height: 300,
            width: 350,
          ),
          Wrap(direction: Axis.horizontal, children: itemsChips()),
        ],
      )),
    );
  }

  List<Widget> itemsChips() {
    List<Widget> chips = [];
    for (int i = 0; i < _chips.length; i++) {
      Widget item = Padding(
        padding: const EdgeInsets.only(left: 10, right: 5),
        child: InputChip(
          avatar: CircleAvatar(
            backgroundColor: Colors.white,
            child: Text(_chips[i].label[0].toUpperCase()),
          ),
          label: Text(_chips[i].label),
          labelStyle: const TextStyle(color: Colors.white),
          backgroundColor: _chips[i].color,
          selected: _chips[i].isSelected,
          onDeleted: () {
            setState(() {
              _chips.removeAt(i);
            });
          },
          onSelected: (bool value) {
            setState(() {
              _chips[i].isSelected = value;
            });
          },
        ),
      );
      chips.add(item);
    }
    return chips;
  }
}

Conclusion:

In the article, I have explained the Input Chip basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Input Chip User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Input Chip in your flutter projects. We will show you what the Introduction is and what are the construction and properties of the Input Chip, and make a demo program for working with Input Chip 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.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

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! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Cupertino is a bunch of Flutter Widgets supportive of carrying out an ongoing iOS plan. A CupertinoPopupSurface can be designed to paint or not paint a white variety on top of its obscured region. Typical use ought to paint white on top of the haze.

In any case, the white paint can be disabled to deliver divider holes for a more complicated design, e.g., CupertinoAlertDialog Widget. Moreover, the white paint can be disabled to deliver an obscured adjusted square shape with next to no variety like iOS’s volume control popup.

This article will explore the Cupertino Popup Surface In Flutter. We will see how to implement a demo program. We will learn how to use the Cupertino popup surface in flutter and also learn how to customize the CupertinoPopupSurface widget using different properties in your flutter applications.

CupertinoPopupSurface class – Cupertino library – Dart API
API docs for the CupertinoPopupSurface class from the Cupertino library, for the Dart programming language.api.flutter.dev

Table Of Contents::

What is Cupertino Popup Surface?

Constructor

Properties

Code Implement

Code File

Conclusion

What is Cupertino Popup Surface?

Cupertino popup surface in flutter is only an ios-like popup surface or bottom sheet. CupertinoPopupSurface widget allows us to make a popup surface like ios. It is like the bottom sheet in android. A popup surface will show over the items on the screen.

This conduct will assist us with showing extra details on a similar screen without exploring another screen. When the popup surface seems like we can’t communicate with different parts of the screen.

We can excuse it by tapping outside the popup surface or by utilizing Navigator. pop(). For the most part, we will utilize popup surfaces in cases like altering data or sharing content, and so on.

Demo Module ::

This demo video shows how to use a Cupertino popup surface in a flutter and shows how a Cupertino popup surface will work in your flutter applications. We will show a popup over the content on the screen. It will be shown on your device.

Constructor:

To utilize CupertinoPopupSurface, you need to call the constructor underneath:

const CupertinoPopupSurface({
  Key? key,
  this.isSurfacePainted = true,
  this.child,
})

We need to call the constructor of CupertinoPopupSurface class and give the necessary properties. The CupertinoPopupSurface widget has no necessary properties. Since it is a waste of time to show an empty popup surface we need to add the child.

Properties:

There are some properties of CupertinoPopupSurface are:

• > key — This property is used to control if it should be replaced.
• > isSurfacePainted — This property has utilized the choice of whether to paint a clear white on top of this surface’s obscured background. isSurfacePainted ought to be true for a regular popup that contains content with practically no dividers. A popup that requires dividers ought to set isSurfacePainted to false and afterward paint its surface region. Some pop-ups, similar to iOS’s volume control popup, decide to deliver an obscured region with practically no white paint covering it. To accomplish this impact, isSurfacePainted ought to be set to false.
• > child — This property has been utilized to the widget below this widget in the tree. Child Property will have only one child. To allocate multiple users need to make use of the Row Widget or Column Widget and consider it.

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 create a new class MyHomePage(). In this class, we will add the body part. In this body, we will add a Container widget with margin, width, height, and alignment. For its child, we will add crossAxisAlignment and mainAxisAlignment as the center.

Container(
    margin: const EdgeInsets.all(30),
    width: double.infinity,
    height: MediaQuery.of(context).size.height * 0.50,
    alignment: Alignment.center,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            "assets/logo.png",
            height: 300,
            width: 350,
          ),
          const SizedBox(height: 40,),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              padding: const EdgeInsets.all(15),
              textStyle: const TextStyle(
                  fontSize: 16,),
            ),
            onPressed: () {
              showPopup();
            },
            child: const Text("Show Cupertino Popup Surface"),
          ),
        ])),

We will add an image and an elevated button. In this button, we will add the onPressed method. In this method, we will add the showPopup() method. We will describe it below.

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Now, deeply describe the showPopup() method are:

In the showPopup() method, we will add showCupertinoModalPopup widget. In this widget, we will add context and a builder. In builder, we will return the CupertinoPopupSurface widget. In this widget, we will add isSurfacePainted was true.

void showPopup() {
  showCupertinoModalPopup(
      context: context,
      builder: (BuildContext builder) {
        return CupertinoPopupSurface(
          isSurfacePainted: true,
          child: Container(
              padding: const EdgeInsetsDirectional.all(20),
              color: CupertinoColors.white,
              alignment: Alignment.center,
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).copyWith().size.height * 0.35,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Image.asset(
                    "assets/img.png",
                    height: 160,
                    width: 250,
                  ),
                  const Material(
                      child: Text(
                    "Are You Flutter Developer?",
                    style: TextStyle(
                      color: CupertinoColors.black,
                      fontSize: 18,
                    ),
                  )),
                  const SizedBox(height: 5,),

                  Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        ElevatedButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: const Text("NO")),
                        ElevatedButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: const Text("YES")),
                      ]),
                ],
              )),
        );
      });
}

We will add the column widget. In this widget, we will add an image and text. Also, we will add a row widget on the same column. In this widget, we will add two ElevatedButton. When the user presses the button, then the popup show on your screen.

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_popup_surface_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 MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      debugShowCheckedModeBanner: false,
      home: const Splash(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Cupertino Popup Surface Demo"),
        automaticallyImplyLeading: false,
        backgroundColor: Colors.blueGrey,
      ),
      body: Container(
          margin: const EdgeInsets.all(30),
          width: double.infinity,
          height: MediaQuery.of(context).size.height * 0.50,
          alignment: Alignment.center,
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset(
                  "assets/logo.png",
                  height: 300,
                  width: 350,
                ),
                const SizedBox(
                  height: 40,
                ),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.all(15),
                    textStyle: const TextStyle(
                      fontSize: 16,
                    ),
                  ),
                  onPressed: () {
                    showPopup();
                  },
                  child: const Text("Show Cupertino Popup Surface"),
                ),
              ])),
    );
  }

  void showPopup() {
    showCupertinoModalPopup(
        context: context,
        builder: (BuildContext builder) {
          return CupertinoPopupSurface(
            isSurfacePainted: true,
            child: Container(
                padding: const EdgeInsetsDirectional.all(20),
                color: CupertinoColors.white,
                alignment: Alignment.center,
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).copyWith().size.height * 0.35,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Image.asset(
                      "assets/img.png",
                      height: 160,
                      width: 250,
                    ),
                    const Material(
                        child: Text(
                      "Are You Flutter Developer?",
                      style: TextStyle(
                        color: CupertinoColors.black,
                        fontSize: 18,
                      ),
                    )),
                    const SizedBox(
                      height: 5,
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          ElevatedButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: const Text("NO")),
                          ElevatedButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: const Text("YES")),
                        ]),
                  ],
                )),
          );
        });
  }
}

Conclusion:

In the article, I have explained Cupertino Popup Surface’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino Popup Surface 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 Popup Surface in your flutter projects. We will show you what the Introduction is. Make a demo program for working with Cupertino Popup Surface and you’ve learned how to create & use Cupertino Popup Surface 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.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

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.

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

Constructor

Properties

Code Implement

Code File

Conclusion

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.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

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.

CupertinoContextMenu is a full-screen modular course that opens when the child is for quite some time squeezed. At the point when open, the CupertinoContextMenu shows the child, or the widget returned by previewBuilder whenever given, in an enormous full-screen Overlay with a list of buttons determined by activities. The child/preview is put in an Expanded Widget so it will develop to fill the Overlay assuming its size is unconstrained.

This blog will explore the Cupertino Context Menu In Flutter. We perceive how to execute a demo program. We are going to learn about how we can utilize CupertinoContextMenu and how to customize the style of Cupertino tabBar using various properties in your flutter applications.

CupertinoContextMenu class – cupertino library – Dart API
A full-screen modal route that opens when the child is long-pressed. When open, the CupertinoContextMenu shows the…api. flutter.dev

Table Of Contents::

Introduction

Constructor

Parameters

Code Implement

Code File

Conclusion

Introduction:

Cupertino context menu is a flutter used to show an ios style context menu or popup menu. It is additionally called an overflow menu. A CupertinoContextMenu widget shows a display that on lengthy press will show the context menu with activities for that child. It proves to be useful when we need to show more choices for a child in a little space.

We can excuse the menu in two ways. One is by tapping the background of the overlay that seems when the menu is shown. The subsequent technique is by utilizing the Navigator. pop capability inside onPressed callback of CupertinoMenuAction widget.

Demo Module ::

This demo video shows how to create a Cupertino context menu in a flutter and shows how a Cupertino context menu will work in your flutter applications. We will show an image on the screen. When the user tap on this image then, the menu will pop up. It will be shown on your device.

Constructor:

To utilize CupertinoContextMenu, you need to call the constructor underneath:

CupertinoContextMenu({
  Key? key,
  required this.actions,
  required this.child,
  this.previewBuilder,
})

To make a Cupertino setting menu in flutter we need to call the constructor of CupertinoContextMenu class and give the required properties. The Cupertino context menu has two required properties child and actions. The child acknowledges the widget as value. For actions, we can utilize any actions yet, for the most part, will utilize CupertinoContextMenuAction actions.

Properties:

There are some properties of CupertinoContextMenu are:

• > child — This property is utilized to show a widget for which we will show our Cupertino setting menu. It accepts any widget as a value.
• > actions — This property is used to show actions or items for our Cupertino setting menu. It will acknowledge a list of widgets as value. Be that as it may, by and large, we will involve CupertinoContextMenuAction widgets for this list.
• > previewBuilder — This property is used in the Cupertino context menu that appears with a preview of the child when we long press the child. We will use this property if we want to change the look of the child that appears in the preview.

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.

We should make a model where we will execute the Cupertino context menu in a flutter. In this model, we will show a picture for which the context menu will show up. We will show the menu with three actions share, save to gallery, and delete. At the point when we long-press the picture, we will expand the picture size to fit the screen utilizing previewBuilder.

Center(
  child: Container(
    margin: const EdgeInsets.all(40),
    width: double.infinity,
    child:CupertinoContextMenu(
      actions:[
        CupertinoContextMenuAction(
          onPressed: (){
            Navigator.of(context).pop();
          },
          trailingIcon: CupertinoIcons.share,
          child:const Text("Share"),
        ),
        CupertinoContextMenuAction(
          onPressed: (){
            Navigator.of(context).pop();
          },
          trailingIcon: CupertinoIcons.down_arrow,
          child:const Text("Save To Gallery"),
        ),
        CupertinoContextMenuAction(
          onPressed: (){
            Navigator.of(context).pop();
          },
          isDestructiveAction: true,
          trailingIcon: CupertinoIcons.delete,
          child: const Text("Delete"),
        )
      ],
      child:Image.asset("assets/logo.png",),
    ),
  ),
)

Now, we will write a code for previewBuilder. It is increasing the image size when the image is in preview mode.

previewBuilder: (context, animation, child) {
  return SizedBox(
    height: double.infinity,
    width: double.infinity,
    child: Image.asset(
      'assets/logo.png',
      height: 200,width: 300,
    ),
  );
},

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_context_menu_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 MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      debugShowCheckedModeBanner: false,
      home: const Splash(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Flutter Cupertino Context Menu Demo"),
          centerTitle: true,
          automaticallyImplyLeading: false,
        ),
        body: Center(
          child: Container(
            margin: const EdgeInsets.all(40),
            width: double.infinity,
            child: CupertinoContextMenu(
              actions: [
                CupertinoContextMenuAction(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  trailingIcon: CupertinoIcons.share,
                  child: const Text("Share"),
                ),
                CupertinoContextMenuAction(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  trailingIcon: CupertinoIcons.down_arrow,
                  child: const Text("Save To Gallery"),
                ),
                CupertinoContextMenuAction(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  isDestructiveAction: true,
                  trailingIcon: CupertinoIcons.delete,
                  child: const Text("Delete"),
                )
              ],
              previewBuilder: (context, animation, child) {
                return SizedBox(
                  height: double.infinity,
                  width: double.infinity,
                  child: Image.asset(
                    'assets/logo.png',
                    height: 200,
                    width: 300,
                  ),
                );
              },
              child: Image.asset(
                "assets/logo.png",
              ),
            ),
          ),
        ));
  }
}

Conclusion:

In the article, I have explained the Cupertino Context Menu basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino Context Menu 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 Context Menu in your flutter projects. We will show you what the Introduction is and what are the construction and properties of the Cupertino Context Menu, and make a demo program for working with Cupertino Context Menu 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.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

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.