preface

I have been exposed to Flutter for less than a month, deeply feeling the power of this platform, so I keep learning. The Flutter_gallery in the official Example of Flutter perfectly shows the functions of all the Flutter widgets

The animation content shows a very beautiful deployable Tab Tab navigation with animation and drag-and-drop functions. It is very beautiful, but its implementation does not abstract out a Widget that can be used by third parties, and its page content is not friendly enough to customize, and there are some bugs when sliding. I optimized it based on his work

The official show is a very good open source example, I modified, also dare not enjoy alone, now share with you, welcome everyone to exchange more

appearance

implementation

Here is my code: GitHub/Realank

To use this control, it is very simple to define the page data first:

const Color _mariner = const Color(0xFF3B5F8F);
const Color _mediumPurple = const Color(0xFF8266D4);
const Color _tomato = const Color(0xFFF95B57);
const Color _mySin = const Color(0xFFF3A646);

List<CardSection> allSections = <CardSection>[
  new CardSection(
      title: 'First Page',
      leftColor: _mediumPurple,
      rightColor: _mariner,
      contentWidget: Center(child: new Text('Page one'))),
  new CardSection(
      title: 'Second Page',
      leftColor: _mariner,
      rightColor: _mySin,
      contentWidget: Center(child: new Text('Page 2'))),
  new CardSection(
      title: 'Third Page',
      leftColor: _mySin,
      rightColor: _tomato,
      contentWidget: Center(child: new Text('Page 3'))),
  new CardSection(
      title: 'Forth Page',
      leftColor: _tomato,
      rightColor: Colors.blue,
      contentWidget: Center(child: new Text('Page four'))),
  new CardSection(
      title: 'Fifth Page',
      leftColor: Colors.blue,
      rightColor: _mediumPurple,
      contentWidget: Center(child: new Text('Page 5')))];Copy the code

Then create this control:

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo', home: new Scaffold( body: Center( child: new AnimateTabNavigation( sectionList: allSections, ), ), ), ); }}Copy the code

You’re done

The principle of

Know what it is but also know why, say the realization principle of this control below

First, the data structure is defined in sections. Dart:


class CardSection {
  CardSection({this.title, this.leftColor, this.rightColor, this.contentWidget});

  final String title;
  final Color leftColor;
  final Color rightColor;
  final Widget contentWidget;

  @override
  bool operator= = (Object other) {
    if (other is! CardSection) return false;
    final CardSection otherSection = other;
    return title == otherSection.title;
  }

  @override
  int get hashCode => title.hashCode;
}

Copy the code

It defines the title of one of the cards, the color on the left and the color on the right (for transitional color effects), and the child controls (I modified this so that others can add controls when they use it).

Dart then defines several widgets:

  • SectionCard: Title card
  • SectionTitle: title
  • SectionIndicator: Decorative thread under the heading

Dart and cardNavigation. Dart are all set up in this way:

  1. Define TAB height maxHeight to display in full screen, and TAB height minHeight to display at the top when TAB is opened
  2. As the user drags TAB cards, calculate the animation progress according to the ratio of the card position to minHeight and maxHeight (0.0-1.0).
  3. In _AllSectionsLayout, we define the columnCardRect of the card when TAB is displayed in full screen, and the rowCardRectt when TAB is displayed at the top when TAB is opened
  4. Calculate the recT size of the intermediate state of the two RECts in the 0-1 progress of the animation and assign a value to each card so that the card has the appearance of the intermediate state.
  5. When the user clicks the TAB field, the _maybeScroll method is triggered, which determines whether the current TAB is full screen or open
  6. When the TAB page is in full screen, expand the corresponding TAB page
  7. When the TAB is already open, click on the left side of the TAB and turn the page to the left, and vice versa.

From 0 to 1: my Flutter technology practice | the nuggets essay, the campaign is underway