Note: The Flutter and Dart versions are as follows without special instructions:

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

showDialog

ShowDialog is used to create a Material style dialog box.

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

The effect is as follows:

The Builder usually returns Dialog components, such as SimpleDialog and AlertDialog.

The useRootNavigator parameter is used to determine whether to push the dialog to the Navigator farthest or closest to the given “context”. By default, useRootNavigator is “true” and is pushed to the root Navigator. If your application has multiple Navigators, the close dialog box is required

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

Rather than

Navigator.pop(context, result)
Copy the code

Barrierdistransmissible parameter Determines whether a window is activated when a window is clicked. Default: true.

showCupertinoDialog

ShowCupertinoDialog Is used to display the ios style dialog box. The basic usage is as follows:

showCupertinoDialog(
    context: context,
    builder: (context) {
      returnCupertinoAlertDialog( ... ) ; });Copy the code

The effect is as follows:

The Builder usually returns CupertinoDialog or CupertinoAlertDialog.

showGeneralDialog

ShowGeneralDialog showCupertinoDialog showGeneralDialog showGeneralDialog showCupertinoDialog showGeneralDialog

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,
        ),
      );
    });
Copy the code

The effect is as follows:

Add background color:

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

The effect is as follows:

Barrierdistransmissible: Can YOU click on the background to turn it off?

BarrierColor: Background color

TransitionDuration: animation duration,

TransitionBuilder is a build in/out animation. The default animation is fade in/out animation.

showGeneralDialog(
    transitionBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      returnScaleTransition(scale: animation, child: child); },...).Copy the code

The effect is as follows:

showAboutDialog

AboutDialog describes the current App information and provides two buttons at the bottom: view license button and close button. AboutDialog needs to be used with showAboutDialog as follows:

showAboutDialog(
  context: context,
  applicationIcon: Image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationName: 'Applications',
  applicationVersion: '1.0.0',
  applicationLegalese: 'Copyright Lao Meng, a programmer with attitude',
  children: <Widget>[
    Container(
      height: 30,
      color: Colors.red,
    ),
    Container(
      height: 30,
      color: Colors.blue,
    ),
    Container(
      height: 30,
      color: Colors.green,
    )
  ],
);
Copy the code

The effect is as follows:

The attributes are described as follows:

  • applicationIcon: The icon of the application.
  • applicationName: Application name.
  • applicationVersion: Application version.
  • applicationLegalese: Copyright tips.
  • children: position as shown above in red, blue and green.

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

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

  1. inpubspec.yamlTo support internationalization:
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
Copy the code
  1. Configure the current region in the MaterialApp:
MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('zh'.'CH'),
        const Locale('en'.'US'),
      ],
      locale: Locale('zh'),...).Copy the code

Effect:

If you click showLicensePage, you can view showLicensePage.

showLicensePage

This control is basically not used, you can browse.

LicensePage Describes the current App license information. LicensePage must be used together with showLicensePage as follows:

showLicensePage(
  context: context,
  applicationIcon: Image.asset(
    'images/bird.png',
    height: 100,
    width: 100,
  ),
  applicationName: 'Applications',
  applicationVersion: '1.0.0',
  applicationLegalese: 'Copyright Lao Meng, a programmer with attitude',);Copy the code

The effect is as follows:

We cannot change the following English.

showBottomSheet

The Scaffold parent component displays a Material style bottom sheet in the same position as bottomSheet of the Scaffold component. If bottomSheet is set, call showBottomSheet to throw an exception.

The basic usage is as follows:

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

The effect is as follows:

Set its background color, shadow value, shape:

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

The effect is as follows:

Normally, we want to pop directly from the bottom, and the showModalBottomSheet provides that functionality.

showModalBottomSheet

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

showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          returnBottomSheet(...) ; });Copy the code

The effect is as follows:

Set background, shadow, shape:

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

The effect is as follows:

Isdistransmissible: Can YOU click on the background to turn it off?

The isScrollControlled parameter specifies whether to use a draggable, scrollable component. If the child component is a ListView or GridView, this parameter should be set to true. If this parameter is set to true, the maximum height can be used to fill the full screen. Usage:

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return ListView.builder(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('the old meng$index')); }, itemExtent:50,
        itemCount: 50,); });Copy the code

showCupertinoModalPopup

ShowCupertinoModalPopup Displays an ios pop-up box. Commonly used in conjunction with CupertinoActionSheet, it is used as follows:

showCupertinoModalPopup(
    context: context,
    builder: (BuildContext context) {
      return CupertinoActionSheet(
        title: Text('tip'),
        message: Text('Do you want to delete the current item? '),
        actions: <Widget>[
          CupertinoActionSheetAction(
            child: Text('delete'),
            onPressed: () {},
            isDefaultAction: true,
          ),
          CupertinoActionSheetAction(
            child: Text('Not deleting it for now'),
            onPressed: () {},
            isDestructiveAction: true,)]); });Copy the code

The effect is as follows:

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

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

The effect is as follows:

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

showMenu

ShowMenu brings up the Menu Menu 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')));Copy the code

The position argument represents the pop-up position, which has the following effect:

The pop-up position is in the upper left corner of the screen. We want the pop-up position to be where the button is clicked, 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,
);
Copy the code

You need to wrap the button as a separate StatefulWidget component, otherwise the context doesn’t represent a button component.

showSearch

ShowSearch is a direct jump to the search page, used 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; }}Copy the code

To use showSearch, you first need to rewrite a SearchDelegate to implement four of these methods.

BuildLeading builds the control in front of the search box, which is usually a back button and can be hit to exit, as follows:

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

The effect is as follows:

BuildSuggestions is a control that displays while the user is typing. This method is called back when the input field changes, usually returning a ListView that, when clicked, fills the input field with the contents of the current item as follows:

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

The effect is as follows:

BuildActions controls that follow the input box. Normally, the input box will not be empty and will display a clear button.

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

BuildResults builds a Search results control that calls back when the user clicks “Search” on the soft keyboard, usually returning ListView.

@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,); }Copy the code

The effect is as follows:

communication

Old Meng Flutter blog address (nearly 200 controls usage) : laomengit.com