expandable_widget 1.0.5

  • Readme
  • Changelog
  • Example
  • Installing
  • 64

expandable_widget #

中文文档

Preview

Intro #

A Flutter package provides expandable widget and text.

Special Features #

  • Specify max height/lines that shows at the beginning.
  • Custom arrow widget.
  • Specify default expand status.
  • Manual or auto control the expand status.

Usage #

ExpandableWidget #

  • ExpandableWidget.manual Manual control. Show and hide child completely.
ExpandableWidget.manual(
                expand: _showManual,
                vsync: this,
                child: Container(
                  color: Colors.blue,
                  height: 100,
                  width: 100,
                  alignment: Alignment.center,
                  child: Text("show hide"),
                ))
  • ExpandableWidget.showHide Auto control, with an arrow widget at the bottom. Show and hide child completely.
ExpandableWidget.showHide(
        child: Container(
              color: Colors.blue,
              height: 100,
              width: 100,
              alignment: Alignment.center,
              child: Text("show hide"),
            )),

In this case, will only show an expand arrow at the beginning. When clicked the expand arrow, child expanded and showed.

  • ExpandableWidget.maxHeight Auto control, with an arrow widget at the bottom. Collapse child to max-height. If the child's height < maxHeight, then will show child directly
ExpandableWidget.maxHeight(
    maxHeight: 50,
    child: Container(
                color: Colors.blue,
                height: 100,
                width: 100,
                alignment: Alignment.center,
                child: Text("max height"),
              ),
              arrowWidgetHeight: 40,
              arrowWidgetBuilder: (expanded) => _buildArrow(expanded),
            )

In this case, will show a 50-height box and an expand arrow at the beginning. When clicked the expand arrow, box expanded to it full height(100). Note: If you specified a custom arrow widget, you should also provide the height of your arrow widget.

ExpandableText #

  • ExpandableText.manual Manual control. Show and hide text completely.
ExpandableText.manual(
              _text,
              vsync: this,
              expand: _showManual,
            ),
  • ExpandableText.showHide Auto control, with an arrow widget at the bottom. Show and hide text completely.
    ExpandableText.showHide(
              "your text to show...",
            )

In this case, will only show an expand arrow at the beginning. When clicked the expand arrow, text expanded and showed.

  • ExpandableText.lines Auto control, with an arrow widget at the bottom. Collapse child to max-lines. If the text's lines < maxLines, then will show text directly.
ExpandableText.lines(
              _text,
              lines: 4,
              arrowWidgetBuilder: (expanded) => _buildArrow(expanded),
            )

In this case, will show a 4 lines text and an expand arrow at the beginning. When clicked the expand arrow, text expanded to it full lines.

Breaking Changes #

  • add expand param

    From 1.0.3, you can specify default expand status by passing expand value.

  • add manual constructor

    Form 1.0.4, you can control the expand status by using manual constructor and control it by expand value.

[1.0.0] - 2020/4/21 #

  • initial release.

[1.0.1] - 2020/4/21 #

  • update readme.

[1.0.2] - 2020/4/21 #

  • animation improved.
  • change hitTestBehavior of custom arrow widget

[1.0.3] - 2020/4/21 #

  • add expand param.

[1.0.4] - 2020/4/22 #

  • add manual constructor.

[1.0.5] - 2020/4/22 #

  • fix github link.

example/lib/main.dart

import 'package:expandable_widget/expandable.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  final _text =
      '''Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
  Paint your app to life in milliseconds with Stateful Hot Reload. Use a rich set of fully-customizable widgets to build native interfaces in minutes.
  Quickly ship features with a focus on native end-user experiences. Layered architecture allows for full customization, which results in incredibly fast rendering and expressive and flexible designs.''';

  final _arrowHeight = 30.0;

  bool _showManual = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(vertical: 15),
              child: Text(
                "ˇˇˇˇˇˇˇˇ Manual Control ˇˇˇˇˇˇˇˇ",
                style: TextStyle(color: Colors.redAccent),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 15),
              child: Text("---- expandable widget(manual) ----"),
            ),
            ExpandableWidget.manual(
                expand: _showManual,
                vsync: this,
                child: Container(
                  color: Colors.blue,
                  height: 100,
                  width: 100,
                  alignment: Alignment.center,
                  child: Text("show hide"),
                )),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 15),
              child: Text("---- expandable text(manual) ----"),
            ),
            ExpandableText.manual(
              _text,
              vsync: this,
              expand: _showManual,
            ),
            FlatButton(
              color: Colors.grey[300],
              onPressed: () => setState(() => _showManual = !_showManual),
              child: Text("Toggle Manual"),
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 15),
              child: Text(
                "ˇˇˇˇˇˇˇˇ Auto Control ˇˇˇˇˇˇˇˇ",
                style: TextStyle(color: Colors.redAccent),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 15),
              child: Text("---- expandable widget(showHide) ----"),
            ),
            ExpandableWidget.showHide(
                child: Container(
              color: Colors.blue,
              height: 100,
              width: 100,
              alignment: Alignment.center,
              child: Text("show hide"),
            )),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 15),
              child: Text("---- expandable widget(maxHeight) ----"),
            ),
            ExpandableWidget.maxHeight(
              maxHeight: 50,
              //expand: true,
              child: Container(
                color: Colors.blue,
                height: 100,
                width: 100,
                alignment: Alignment.center,
                child: Text("max height"),
              ),
              arrowWidgetHeight: _arrowHeight,
              arrowWidgetBuilder: (expanded) => _buildArrow(expanded),
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 15),
              child: Text("---- expandable text(showHide) ----"),
            ),
            ExpandableText.showHide(
              _text,
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 15),
              child: Text("---- expandable text(lines) ----"),
            ),
            ExpandableText.lines(
              _text,
              //expand: true,
              lines: 4,
              arrowWidgetBuilder: (expanded) => _buildArrow(expanded),
            ),
          ],
        ),
      ),
    );
  }

  _buildArrow(bool expanded) {
    return Container(
      height: _arrowHeight,
      alignment: Alignment.center,
      child: Text(
        expanded ? "hide" : "show",
        style: TextStyle(color: Colors.blueAccent),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  expandable_widget: ^1.0.5

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:expandable_widget/expandable.dart';
import 'package:expandable_widget/res/expand_arrow.dart';
import 'package:expandable_widget/res/expandable_text.dart';
import 'package:expandable_widget/res/expandable_widget.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
29
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
99
Overall:
Weighted score of the above. [more]
64
Learn more about scoring.

We analyzed this package on May 30, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Maintenance suggestions

The package description is too short. (-1 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test