Did you know that there are more than 10 kinds of show built into Flutter

Note: without special instructions, the versions of Flutter and Dart are as follows:

  • Flutter version: 1.12.13+hotfix.5
  • Dart version: 2.7.0

showDialog

showDialog is used to pop up the Material style dialog box. The basic usage is as follows:

showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        ...
      );
    }
);

The effect is as follows:

builder usually returns Dialog components, such as SimpleDialog and AlertDialog.

The useRootNavigator parameter is used to determine whether to push the dialog box to the Navigator farthest or closest to the given "context". By default, useRootNavigator is "true" and is pushed to the root Navigator. If the application has multiple navigators, you need to use the

Navigator.of(context, rootNavigator: true).pop(result)

Instead of

Navigator.pop(context, result)

The barrierdissible parameter confirms whether a prompt box will pop up when clicking the external area of the prompt box. The default value is true.

showCupertinoDialog

showCupertinoDialog is used to pop up the ios Style dialog box. The basic usage is as follows:

showCupertinoDialog(
    context: context,
    builder: (context) {
      return CupertinoAlertDialog(
       ...
      );
    });

The effect is as follows:

builder usually returns CupertinoDialog or CupertinoAlertDialog.

showGeneralDialog

If the above two prompt boxes do not meet your needs, you can also use showGeneralDialog to customize the prompt box. In fact, showDialog and showCupertinoDialog are also implemented by showGeneralDialog. The basic usage is as follows:

showGeneralDialog(
    context: context,
    barrierDismissible:true,
    barrierLabel: '',
    transitionDuration: Duration(milliseconds: 200),
    pageBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return Center(
        child: Container(
          height: 300,
          width: 250,
          color: Colors.lightGreenAccent,
        ),
      );
    });

The effect is as follows:

Add background color:

showGeneralDialog(
    context: context,
    barrierColor: Colors.black.withOpacity(.5),
    ...
  )

The effect is as follows:

Barrierdissible: can I click background close.

barrierColor: background color

Transition duration: animation duration,

transitionBuilder is to build in and out animation. The default animation is gradually hidden and gradually displayed. The code of building scale animation is as follows:

showGeneralDialog(
    transitionBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      return ScaleTransition(scale: animation, child: child);
    },
    ...
  )

The effect is as follows:

showAboutDialog

AboutDialog is used to describe the current App information. Two buttons are provided at the bottom: View permission button and close button. AboutDialog needs to be used with showAboutDialog. The usage is as follows:

showAboutDialog(
  context: context,
  applicationIcon: Image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationName: 'application program',
  applicationVersion: '1.0.0',
  applicationLegalese: 'copyright Lao Meng, an attitude programmer',
  children: <Widget>[
    Container(
      height: 30,
      color: Colors.red,
    ),
    Container(
      height: 30,
      color: Colors.blue,
    ),
    Container(
      height: 30,
      color: Colors.green,
    )
  ],
);

The effect is as follows:

The properties are described as follows:

  • Application icon: the icon of the application.
  • applicationName: application name.
  • applicationVersion: application version.
  • Application legal: a hint of copyright.
  • children: the red, blue and green position shown above.

All properties need to be set manually, not acquired automatically.

The following two buttons display the corresponding language according to the language supported by the application. For example, the method of displaying Chinese is as follows:

  1. Configure in pubspec.yaml to support Internationalization:
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  1. To configure the current area in MaterialApp:
MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
      locale: Locale('zh'),
      ...
  )

Effect:

Click View license to call showLicensePage. For related effects, you can view showLicensePage.

showLicensePage

This control is basically not used. Just browse it.

LicensePage is used to describe the current App license information. LicensePage needs to be used with showLicensePage. The usage is as follows:

showLicensePage(
  context: context,
  applicationIcon: Image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationName: 'application program',
  applicationVersion: '1.0.0',
  applicationLegalese: 'copyright Lao Meng, an attitude programmer',
);

The effect is as follows:

We can't change the following English.

showBottomSheet

A material style bottom sheet is displayed on the recent Scaffold parent component. Its location is the same as the Scaffold component's bottom sheet. If Scaffold has set the bottom sheet, call showBottomSheet to throw an exception.

The basic usage is as follows:

showBottomSheet(
    context: context,
    builder: (context) {
      return Container(height: 200, color: Colors.lightBlue);
    });

The effect is as follows:

Set its background color, shadow value and shape:

showBottomSheet(
    context: context,
    backgroundColor: Colors.lightGreenAccent,
    elevation:20,
    shape: CircleBorder(),
    builder: (context) {
      return Container(height: 200);
    });

The effect is as follows:

In general, we want to pop directly from the bottom. Showmodal bottom sheet provides the function of pop directly from the bottom.

showModalBottomSheet

Pop up from the bottom, usually used with BottomSheet, as follows:

showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return BottomSheet(...);
        });

The effect is as follows:

Set background, shadow, shape:

showModalBottomSheet(
    context: context,
    backgroundColor: Colors.lightBlue,
    elevation: 10,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
    ...
  )

The effect is as follows:

Isdissible: can I click background close.

The isScrollControlled parameter specifies whether to use the draggable scrollable component. If the sub component is ListView or GridView, this parameter should be set to true. When it is set to true, the maximum height can occupy the full screen. The usage is as follows:

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return ListView.builder(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Lao Meng $index'),
          );
        },
        itemExtent: 50,
        itemCount: 50,
      );
    });

showCupertinoModalPopup

Show cupertinomodalpopup shows the style pop-up box of ios, which is usually used in combination with cupertinomodalpopup. The usage is as follows:

showCupertinoModalPopup(
    context: context,
    builder: (BuildContext context) {
      return CupertinoActionSheet(
        title: Text('Tips'),
        message: Text('Do you want to delete the current item?'),
        actions: <Widget>[
          CupertinoActionSheetAction(
            child: Text('delete'),
            onPressed: () {},
            isDefaultAction: true,
          ),
          CupertinoActionSheetAction(
            child: Text('Temporary deletion'),
            onPressed: () {},
            isDestructiveAction: true,
          ),
        ],
      );
    }
);

The effect is as follows:

The filter parameter can be used to blur or matrix the area outside the pop-up box. The usage is as follows:

showCupertinoModalPopup(
    context: context,
    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
    ...
  )

The effect is as follows:

The area outside the pop-up box has a ground glass effect.

showMenu

showMenu to pop up a Menu, the usage is as follows:

showMenu(
    context: context,
    position: RelativeRect.fill,
    items: <PopupMenuEntry>[
      PopupMenuItem(child: Text('Chinese')),
      PopupMenuDivider(),
      CheckedPopupMenuItem(
        child: Text('Mathematics'),
        checked: true,
      ),
      PopupMenuDivider(),
      PopupMenuItem(child: Text('English?')),
    ]);

The position parameter indicates the pop-up position. The effect is as follows:

The pop-up position is at the top left corner of the screen. We want the pop-up position to be at the click position, so we need to calculate the position of the button as follows:

final RenderBox button = context.findRenderObject();
final RenderBox overlay = Overlay.of(context).context.findRenderObject();
final RelativeRect position = RelativeRect.fromRect(
  Rect.fromPoints(
    button.localToGlobal(Offset(0, 0), ancestor: overlay),
    button.localToGlobal(button.size.bottomRight(Offset.zero),
        ancestor: overlay),
  ),
  Offset.zero & overlay.size,
);

You need to encapsulate the button as a StatefulWidget component, otherwise context represents a button component.

showSearch

showSearch is to jump to the search page directly. The usage is as follows:

showSearch(context: context, delegate: CustomSearchDelegate());

class CustomSearchDelegate extends SearchDelegate<String>{
  @override
  List<Widget> buildActions(BuildContext context) {
    return null;
  }

  @override
  Widget buildLeading(BuildContext context) {
    return null;
  }

  @override
  Widget buildResults(BuildContext context) {
    return null;
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return null;
  }

}

Using showSearch, you first need to rewrite a SearchDelegate to implement four of its methods.

buildLeading refers to the control in front of the search box. It is generally a return button. Click exit, and the code is as follows:

@override
Widget buildLeading(BuildContext context) {
  return IconButton(
    icon: Icon(Icons.arrow_back,color: Colors.blue,),
    onPressed: (){
      close(context, '');
    },
  );
}

The effect is as follows:

Buildsuuggestions is a control displayed when the user is inputting. This method is called back when the input box is released and changed. Usually, a ListView is returned. When one of the items is clicked, the content of the current item is filled into the input box. The usage is as follows:

@override
Widget buildSuggestions(BuildContext context) {
  return ListView.separated(
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('Lao Meng $index'),
        onTap: () {
          query = 'Lao Meng $index';
        },
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },
    itemCount: Random().nextInt(5),
  );
}

The effect is as follows:

The control behind the buildActions input box. Generally, the input box is not empty. A clear button is displayed. Click Clear input box:

@override
List<Widget> buildActions(BuildContext context) {
  return [
    IconButton(
      icon: Icon(
        Icons.clear,
      ),
      onPressed: () {
        query = '';
      },
    )
  ];
}

buildResults is a control for building Search results. When the user clicks "Search" on the soft keyboard, the method will be called back. Generally, it will return to ListView. The usage is as follows:

@override
Widget buildResults(BuildContext context) {
  return ListView.separated(
    itemBuilder: (context, index) {
      return Container(
        height: 60,
        alignment: Alignment.center,
        child: Text(
          '$index',
          style: TextStyle(fontSize: 20),
        ),
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },
    itemCount: 10,
  );
}

The effect is as follows:

Welcome to flitter's wechat communication group (laomengit) to learn and make progress together. Life is not only about living in front of you, but also about poetry and far away.

Of course, I also very much hope that you will pay attention to my official account, which contains all kinds of benefits.

Tags: Android iOS SDK

Posted on Thu, 19 Mar 2020 06:06:28 -0700 by justinma