navigation

  • Study Part I — Simple Use of Dialog
  • The Use and Principles of MobX

preface

The author’s Flutter practice project code is placed in flutter_demo, there is a need to star oh. If you feel helpful after reading, you can start clicking 👍.

The theme

Today’s share is a common function – water pressure effect, the effect is as follows:

This effect is a common android phone press water line effect.

example

After looking at the results, we started to write an example. In fact, the example is the one above, which is my impression of Gmail:

The subject frame is android’s Drawer effect. For Drawer, Flutter is very well supported and easy to use, as follows:


  @override
  Widget build(BuildContext context) {
    final currentPage = _getDrawerItemWidget(_selectedPageKey);

    return Scaffold(
      appBar: Common.appBar(title: currentPage.title),
      extendBody: true,
      drawer: _buildDrawer(),
      body: currentPage,
    );
  }


 _buildDrawer() {
    List<Widget> drawerOptions = [];
    widget.drawerItems.forEach((String key, DrawerItem item) => drawerOptions.add(
      DrawerRippleItem(
        iconPath: item.iconPath,
        title: item.title,
        highlightColor: item.highlightColor,
        contentHighlightColor: item.contentHighlightColor,
        isSelect: key == _selectedPageKey,
        tapCallback: () => _onSelectItem(key),
      )
    ));

    return Drawer(
        child: Container(
            color: Colors.white,
            child: Column(
              children: <Widget>[
                Container(
                  height: 100,
                  margin: EdgeInsets.fromLTRB(16.32.0.0),
                  child: Center(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[Common.circleAvatar(size: 64.0, path: "ic_default_avatar.webp")],
                    ),
                  ),
                ),
                Column(children: drawerOptions)
              ],
            )));
  }

Copy the code

In the Scaffold Widget, add a drawer attribute. I won’t go into details, but you can see the full code if you are interested. There are three widgets that are used to press back water lines: Material, Ink and InkWell. Material is to provide support for Android design style. Ink translates to Ink and is the outer Container of water pattern effect, which is equivalent to Container. InkWell is the real Container of water pattern, which includes water pattern color and other attributes.

import 'package:flutter/material.dart';

class RippleItem extends StatelessWidget {

  RippleItem({Key key,
    this.isSelect = false.this.itemHeight = 48.0.this.highlightColor = const Color(0xFFE1F5FE),
    this.normalColor = Colors.white,
    this.rippleColor,
    this.tapCallback,
    this.borderRadius = const BorderRadius.all(Radius.zero),
    this.content,
  }) : super(key: key);

  final bool isSelect;
  final double itemHeight;
  final Color normalColor;
  final Color highlightColor;
  final Color rippleColor;
  final GestureTapCallback tapCallback;
  final BorderRadius borderRadius;
  final Widget content;

  @override
  Widget build(BuildContext context) {
    returnMaterial( color: normalColor, child: Ink( decoration: BoxDecoration( color: isSelect ? highlightColor : normalColor, borderRadius: borderRadius ), child: InkWell( splashColor: rippleColor ! =null? rippleColor : Theme.of(context).splashColor, borderRadius: borderRadius, onTap: tapCallback, child: Container( height: itemHeight, child: content, )))); }}Copy the code

You can see that in Flutter, the visual effect is a superposition of widgets, known as nested hell. After completing the encapsulation of RippleItem, I added the encapsulation of DrawerRippleItem, as follows:

import 'package:flutter/material.dart';
import 'package:flutter_demo/widget/ripple_item.dart';

import '.. /common_widget.dart';

class DrawerRippleItem extends StatelessWidget {
  DrawerRippleItem({
    Key key,
    this.isSelect = false.this.iconPath,
    @required this.title,
    this.highlightColor,
    this.contentHighlightColor,
    this.tapCallback,
  }) : super(key: key);

  final String iconPath;
  final String title;
  final Color highlightColor;
  final Color contentHighlightColor;
  final bool isSelect;
  final GestureTapCallback tapCallback;

  final Color normalColor = Color(0xFF262d50);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(right: 4.0),
      child: RippleItem(
        isSelect: isSelect,
        tapCallback: tapCallback,
        highlightColor: highlightColor,
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(24.0),
          bottomRight: Radius.circular(24.0),
        ),
        content: Container(
            padding: EdgeInsets.only(left: 24.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  child: Common.iconImage(path: iconPath,color: isSelect ? contentHighlightColor: normalColor),
                  margin: EdgeInsets.only(right: 24.0), ), Common.primarySmallTitle(content: title, color: isSelect ? contentHighlightColor: normalColor) ], )), ), ); }}Copy the code

I just added the Radius attribute, rounded the corners, and I’m done here.

conclusion

This article mainly introduces the Drawer of Flutter and the simple use of water pattern effect. In the world of Flutter, everything is a Widget, and various effects are also nested in various widgets, so as to achieve cool effects. The advantage is that a variety of effects can be combined, and the disadvantage is nesting hell.

warehouse

Click on flutter_demo to see the full code.

reference

Water Ripple Ripple