Flutter 1.12 personal practice learning small cases

1. Introduction

Because there will be various effects in the actual development process, we will put some common interface layout and component use in this warehouse. If there is any consistent with your needs, you can directly take it away, feeling helpful, star is better, and you won’t get lost.

• Warehouse address: github.com/yayxs/flutt…
• Number of STARS: 3 (as of press release)
• Special note: some effects are with the help of the big guy open source code
• Read the warning: there are tables, figures and codes

2. Warehouse folder

Since this is a new Flutter project for each small case, just clone the repository CD into the folder Flutter Run. Part of the explanation is as follows

3. Demo effect

1.dismissible_demo

It is necessary to share this, is also a reference to the packaging of a big man, is similar to wechat’s left slide delete and other operations

• Case presentation

• The core code

  Widget _createListView() {
   return ListView.builder(
     itemCount: _listData.length,
     itemBuilder: (context, index) {
       return Dismissible(
         // Key
         key: Key('key${_listData[index]}'),
         // Child
         child: ListTile(
           title: Text('${_listData[index]}'),
         ),
         onDismissed: (direction) {
           var _snackStr;
           if (direction == DismissDirection.endToStart) {
             // Delete from right to left
             _snackStr = 'deleted${_listData[index]}';
           } else if (direction == DismissDirection.startToEnd) {
             _snackStr = 'collection${_listData[index]}';
           }

           / / show the SnackBar
           Scaffold.of(context).showSnackBar(SnackBar(
             content: Text(_snackStr),
             duration: Duration(milliseconds: 400)));// Refresh the list after deletion to achieve a true deletion
           setState(() {
             _listData.removeAt(index);
           });
         },
         background: Container(
           color: Colors.green,
           // ListTile is used here because you can quickly set the left and right ICONS
           child: ListTile(
             leading: Icon(
               Icons.bookmark,
               color: Colors.white,
             ),
           ),
         ),

         secondaryBackground: Container(
           color: Colors.red,
           // ListTile is used here because you can quickly set the left and right ICONS
           child: ListTile(
             trailing: Icon(
               Icons.delete,
               color: Colors.white,
             ),
           ),
         ),

         confirmDismiss: (direction) async {
           var _confirmContent;

           var _alertDialog;

           if (direction == DismissDirection.endToStart) {
             // Delete from right to left
             _confirmContent = 'Confirm deletion${_listData[index]}? ';
             _alertDialog = _createDialog(
               _confirmContent,
               () {
                 / / show the SnackBar
                 Scaffold.of(context).showSnackBar(SnackBar(
                   content: Text('Confirm deletion${_listData[index]}'),
                   duration: Duration(milliseconds: 400))); Navigator.of(context).pop(true); }, {()/ / show the SnackBar
                 Scaffold.of(context).showSnackBar(SnackBar(
                   content: Text('don't delete${_listData[index]}'),
                   duration: Duration(milliseconds: 400))); Navigator.of(context).pop(false); }); }else if (direction == DismissDirection.startToEnd) {
             _confirmContent = 'Confirm collection${_listData[index]}? ';
             _alertDialog = _createDialog(
               _confirmContent,
               () {
                 / / show the SnackBar
                 Scaffold.of(context).showSnackBar(SnackBar(
                   content: Text('Confirm collection${_listData[index]}'),
                   duration: Duration(milliseconds: 400))); Navigator.of(context).pop(true); }, {()/ / show the SnackBar
                 Scaffold.of(context).showSnackBar(SnackBar(
                   content: Text('no collection${_listData[index]}'),
                   duration: Duration(milliseconds: 400))); Navigator.of(context).pop(false); }); }var isDismiss = await showDialog(
               context: context,
               builder: (context) {
                 return _alertDialog;
               });
           returnisDismiss; }); }); }Copy the code

2.long_press_delete_demo

This effect is when long press to delete, there is a small popover

• Project presentations

• 

• The core code

class PlusMinusEntry extends PopupMenuEntry<int> {
 @override
 final double height = 100;

 @override
 bool represents(int n) => n == 1 || n == - 1;

 @override
 PlusMinusEntryState createState() => PlusMinusEntryState();
}

class PlusMinusEntryState extends State<PlusMinusEntry> {
 void _plus1() {
   // This is the way to close the popup menu and return to the user's selection. 1 Delete -1 Cancel
   Navigator.pop<int>(context, 1);
 }

 void _minus1() {
   Navigator.pop<int>(context, - 1);
 }

 @override
 Widget build(BuildContext context) {
   return Opacity(
     child: Container(
         color: Color.fromRGBO(0.0.0.0.4),
         child: Row(
           children: <Widget>[
             Expanded(child: FlatButton(onPressed: _plus1, child: Text('delete'))),
             Expanded(
                 child: FlatButton(onPressed: _minus1, child: Text('cancel'))),
           ],
         )),
     opacity: 0.3,); }}Copy the code

3.new_provider_demo

This is the use of a provider after it has scrapped the Builder

• The core usage

providers: [
       ChangeNotifierProvider(create: (_) => Counter()),
     ],
Copy the code

4.ok_toast_demo

This is a toast, used as a reminder

• Project presentations
  

  

5.scatter_plot_chart

This is mostly just dots.

• Results demonstrate
  

  

• The core code

class MyPainter extends CustomPainter {
 @override
 void paint(Canvas canvas, Size size) {
   var paint = Paint();

   _myDrawCircle(double offsetX, double offsetY, double radius, Paint paint) {
     canvas.drawCircle(
       Offset(offsetX, offsetY),
       radius,
       paint,
     );
   }

   for (int i = 0; i <= listData.length; ++i) { paint .. style = PaintingStyle.fill .. color = Colors.lightBlue;if (i == 0) {
       _myDrawCircle(50.0.50.0.10.0, paint);
     } else {
       _myDrawCircle(50.0 + 50 * i, 50.10.0, paint); }}}// Use this callback correctly in a real scenario to avoid redraw overhead
 @override
 bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Copy the code

6.search_demo

This is primarily a search effect, not an appBar

• Demonstration effect
  

  

• The core code

 Widget buildTextField() => TextField(
        cursorColor: Colors.black, // Cursor color
        // Default Settings
        decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 10.0),
            border: InputBorder.none,
            icon: Icon(Icons.search),
            hintText: "Name of teacher",
            hintStyle: new TextStyle(
                fontSize: 14, color: Color.fromARGB(50.0.0.0))),
        style: new TextStyle(fontSize: 14, color: Colors.black),
      );
Copy the code

7.select_demo

This is basically a selection, a sliding selection effect

• Demonstration effect
  

  

• The core code

   body: DirectSelectContainer(
        child: SingleChildScrollView(
          child: Container(
            width: 150,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              verticalDirection: VerticalDirection.down,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Row(children: <Widget>[
                      Expanded(
                          child: Container(
                        decoration: _getShadowDecoration(),
                        child: Card(
                            child: Row(
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            Expanded(
                                child: Padding(
                              padding: EdgeInsets.only(left: 22),
                              child: DirectSelectList<String>(
                                  values: _dataList,
                                  defaultItemIndex: selectedIndex,
                                  itemBuilder: (String value) =>
                                      getDropDownMenuItem(value),
                                  focusedItemDecoration: _getDslDecoration(),
                                  onUserTappedListener: () {
                                    _showScaffold();
                                  },
                                  // The selected callback
                                  onItemSelectedListener:
                                      (item, index, context) {
                                    setState(() {
                                      selectedIndex = index;
                                    });
                                  }),
                            )),
                            Padding(
                              padding: EdgeInsets.only(right: 8),
                              child: _getDropdownIcon(),
                            )
                          ],
                        )),
                      )),
                    ]),
                  ],
                ),
              ],
            ),
          ),
        ),
Copy the code

8.selection_callback_example_bar

This is basically a bar chart

• Results demonstrate
  

  

• The core code

 child: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.blueAccent)),
            width: double.infinity,
            height: ScreenUtil.getInstance().setHeight(500),
            child: charts.BarChart(
              // Get the data passed in by the following
              ChartFlutterBean.createSampleData(),
              // Config items, and set the functions that fire
              selectionModels: [
                charts.SelectionModelConfig(
                  type: charts.SelectionModelType.info,
                  changedListener: _onSelectionChanged,
                )
              ],
            ),
          ),
          _showMask(flag, 4.0)].Copy the code

9.sliver_demo

It’s all about the Sliver effect, the Sliver effect, which is much smoother than its other siblings

• No third-party packages are used
• Demonstration effect
  

  

• The core code

SliverPadding(
          padding: const EdgeInsets.all(8.0),
          sliver: new SliverGrid(
            //Grid
            gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3.// The Grid is displayed in two columns
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: new SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                // Create child widgets
                return Container(
                    padding: EdgeInsets.all(5),
                    width: 200,
                    height: 200,
                    child: Image.network('https://yayxs.github.io/head.jpg'));
              },
              childCount: 27,),),),//List
        new SliverFixedExtentList(
          itemExtent: 50.0,
          delegate:
              new SliverChildBuilderDelegate((BuildContext context, int index) {
            // Create a list item
            return new Container(
              alignment: Alignment.center,
              color: Colors.lightBlue[100 * (index % 9)],
              child: new Text('list item $index')); }, childCount:50 //50 list items),),Copy the code

10.spider_chart_demo

This is mainly graphically related, similar to a spidery radar diagram

• Third-party package spider_chart: ^0.1.4
• Demonstration effect
  

  

• The core code

  child: Container(
          width: 300,
          height: 300,
          child: SpiderChart(
              data: [49.98.24.4.8.2.41.47.15.29],
              maxValue: 100,
              colors: <Color>[
                Colors.red,
                Colors.orange,
                Colors.green,
                Colors.yellow,
                Colors.indigo,
              ],
              labels: <String> ["Eat"."Drink"."Play"."Le"."To learn",),),Copy the code

11.url_launcher_demo

This is mainly about connecting externally to other apps, that is, jumping to the browser, making calls, sending text messages, etc., within the Flutter app

• Third-party package URl_launcher: ^5.2.7
• Demonstration effect
  

  

• The core code

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: <Widget>[
        RaisedButton(child: Text('I'm a button'), onPressed: _launchURL)
      ],
    ));
  }

  _launchURL() async {
    String url = 'https://www.baidu.com/s?wd=';
    String keyWords = 'in';
    String urlParams = '$url$keyWords';
    print('${urlParams}');
    if (await canLaunch(urlParams)) {
      await launch(urlParams);
    } else {
      throw 'Could not launch $url'; }}}Copy the code

4. Write at the end

I’m glad you can see it here. I have also checked the website of Flutter. Dev today, its version has been updated to 1.12. I also want to say something to you

• The layout effect of a Flutter that you wish to paste directly to
• Something you didn’t know until you wrote about Flutter
• Flutter Packages play with Demos aggregations
  

  

Although it is over, thank you