This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Learning about Flutter requires a shared popbox page similar to the Android PopupWindow effect. It’s a seemingly simple page, but there’s a lot to try.

GridView and BottomSheet are used for the test. Of course, GridView can also be used. Here are two sets of widgets.

GridView

GridView we are all familiar with, is one of the most commonly used daily control, dish some time ago to learn about the basic use of the ListView, GridView usage is basically the same, dish no longer say, only remind a property, used to set the basic property of the GridView item.

const SliverGridDelegateWithFixedCrossAxisCount({ @required this.crossAxisCount, MainAxisSpacing = 0.0, crossAxisSpacing = 0.0, crossAxisSpacing, This.childaspectratio = 1.0, // item width ratio (default: 1:1)})Copy the code
Tips: Pay attention to the coordination between the number of items and column spacing. If the number is too large, abnormal situations such as incomplete page display may be caused.

BottomSheet

BottomSheet can be understood as a work sheet that pops up from the bottom, and can be divided into two types:

  1. Persistent type work table: similar to a new page, fully displaying ScaffoldState. ShowBottomSheet;
@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: New Text(" share page "), body: New Center(Child: New Builder(Builder: (BuildContext context) { return new FlatButton( onPressed: () { showBottomSheet( context: context, builder: (BuildContext context) { return _showNomalWid(context); }); }, child: new Text(" I want to share "), color: color.blue); }))); } Widget _showNomalWid(BuildContext context) {return new Container(// height: 320.0, // color: Colors.greenAccent, child: new GridView.builder( gridDelegate: New SliverGridDelegateWithFixedCrossAxisCount (crossAxisCount: 4, mainAxisSpacing: 5.0, childAspectRatio: ItemBuilder: (BuildContext Context, int index) {return new Column(children: <Widget>[new Padding(Padding: FromLTRB (0.0, 6.0, 0.0, 6.0), child: new image. asset('images/${urlItems[index]}', width: 50.0, height: 50.0, fit: boxfit.fill,),), new Text(nameItems[index])],); }, itemCount: nameItems.length, ), ); }Copy the code

1.1 If you open the worksheet in showBottomSheet mode, and the content Widget does not limit the width and height, the effect will be that a new page is opened, and the blank area will not disappear when you click it, as shown in the figure:

1.2 If the content is set at this timeWidgetWidth and height, you will find that it is still a page to open again, height occupies the set height from bottom to top, and click the blank area will not disappear, as shown in the figure:

2. Modal worksheets: is a translucent page that takes up half the screen by defaultScaffoldState.showModalBottomSheet.

@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: New Text(" share page "), body: New Center(Child: New Builder(Builder: (BuildContext context) { return new FlatButton( onPressed: () { showModalBottomSheet( context: context, builder: (BuildContext context) { return _showNomalWid(context); }); }, child: new Text(" I want to share "), color: color.blue); }))); }Copy the code

2.1 If the worksheet is opened in the showModalBottomSheet mode and the content Widget is not limited in width and height, the effect is to open a translucent page, occupying half of the screen by default. Click the blank area and the worksheet disappears, as shown in the figure:

2.2 Setting the content at this timeWidgetWidth and height, it will still open a translucent page, height occupies the set height from bottom to top, and click the blank area will disappear, as shown in the picture:

2.3 If you want to set the content nowWidgetIt’s a lot of data, so what’s the effectGridViewIn the existing width and height can be sliding operation, as shown in the figure:

The core source

Side dish slightly modified the page effect, the main source code is as follows:

import 'package:flutter/material.dart'; Class SharePopup extends StatelessWidget {List<String> nameItems = <String>[' wechat ', 'wechat ', 'QQ', 'QQ space ',' weibo ', 'FaceBook', 'mail ',' link ']; List<String> urlItems = <String>[ 'icon_wechat.png', 'icon_wechat_moments.png', 'icon_qq.png', 'icon_qzone.png', 'icon_sina.png', 'icon_facebook.png', 'icon_email.png', 'icon_copylink.png' ]; @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: New Text(" share page "), body: New Center(Child: New Builder(Builder: (BuildContext context) { return new FlatButton( onPressed: () { showModalBottomSheet( context: context, builder: (BuildContext context) { return _shareWidget(context); }); }, child: new Text(" I want to share "), color: color.blue); }))); } Widget _shareWidget(BuildContext Context) {return new Container(height: 250.0, child: new Column(children: <Widget>[new Padding(Padding: EdgeInsets. FromLTRB (0.0, 10.0, 0.0, 0.0), child: new Container(height: 190.0, child: new GridView.builder( gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 4, mainAxisSpacing: ItemBuilder: (BuildContext context, int index) {return new Column(children: <Widget>[new Padding(Padding: EdgeInsets. FromLTRB (0.0, 6.0, 0.0, 6.0), child: New image. asset('images/${urlItems[index]}', width: 50.0, height: 50.0, fit: BoxFit.fill, ) ), new Text(nameItems[index]) ], ); }, itemCount: nameItems.length, ), ), ), new Container( height: Color: color.bluegrey,), New Center(Child: new Padding(Padding: new Padding) EdgeInsets. FromLTRB (0.0, 8.0, 0.0, 8.0), child: new Text(' delete ', style: new TextStyle(fontSize: 18.0, color: 0), child: new Text(' delete ', style: new TextStyle(fontSize: 18.0, color: 0) Colors.blueGrey), ) ), ) ], ), ); }}Copy the code

Xiao CAI has not been in touch with Flutter for a long time, and there are still many unclear and ununderstood aspects. I hope you can give me more advice if there is anything wrong.

Source: Little Monk A Ce