fragment_navigate 1.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 73

Fragment Navigate #

Check it out at Pub.Dev

A controller to make the effect of swapping fragments like in native Android.

ezgif com-video-to-gif-2

Stack Feature:

ezgif com-video-to-gif

Getting Started #

You must first create an object with the following attributes:

static final _fragNav = FragNavigate(
    firstKey: 'a',
    screens: <Posit>[
        Posit(
          key: a,
          title: 'Title A',
          fragment: Container(color: Colors.amberAccent,)
        ),
        Posit(
          key: b,
          title: 'Title B',
          fragment: Text('Test B...')
        ),
        Posit(
          key: c,
          title: 'Title C',
          fragment: Container(color: Colors.blueAccent,)
        ),
        Posit(
          key: d,
          title: 'Title D',
          fragment: Text('Test...')
        ),
    ],
    actionsList: [
        ActionPosit(
          keys: [a, b, c],
          actions: [
            IconButton(
              icon: Icon(Icons.add),
              onPressed: (){
                _fragNav.action('teste');
              }
            )
          ]
        )
      ],
  bottomList: [
    BottomPosit(
      keys: [a, b, c],
      length: 2,
      child: TabBar(
        indicatorColor: Colors.white,
        tabs: <Widget>[
          Text('a'),
          Text('b')
        ],
      )
    )
  ]
)

Screens: #

In Screens, you need pass one list of Posit, to every Posit in screens, you need pass one unique key, one title and one Widget

ActionsList: #

Here you pass one list of ActionPosit, to every ActionPosit, you parse one list of keys and one list of Widgets, the keys is the same keys of screens to show this actions. In click action of your Widget, you can call _fragNav.action('tag', params: 'any object');

_fragNav.action('tag') #

To use it, your widget need implements interface: ActionInterface, and the action will called in:

@override
void action(String tag, {Object params}) {
    switch(tag){
        case 'tag': ...
    }
}

BottomList: #

Here is like ActionsList, but the difference is you need pass length of tabs and the child is one PreferedSizedWidget.

Mounting Layout #

Case the controller of fragments is one Drawer, you need set in build this value: _fragNav.setDrawerContext = context;, this is useful when you change fragment or click in back button, Case the controller of fragments is one Drawer, you need set in build this value: _fragNav.setDrawerContext = context;, this is useful when you change fragment or click in back button, then drawer close.

@override
Widget build(BuildContext context) {
    _fragNav.setDrawerContext = context;

    return StreamBuilder<FullPosit>(
        stream: _fragNav.outStreamFragment,
        builder: (con, s){
          if(s.data != null){
            return DefaultTabController(
                length: s.data.bottom.length,
                child: Scaffold(
                  key: _fragNav.drawerKey,
                  appBar: AppBar(
                    title: Text(s.data.title),
                    actions: s.data.actions,
                    bottom: s.data.bottom.child,
                  ),
                  drawer: CustomDrawer(bloc: _fragNav),
                  body: ScreenNavigate(
                      child: s.data.fragment,
                      bloc: _fragNav
                  ),
                )
            );
        }

      return Container();
    }
);

Use one StreamBuilder passing like stream _fragNav.outStreamFragment, and it return one FullPosit:

FullPosit(
  bottom: => BottomPosit(
      keys => list,
      length => size, 
      child => PreferedSizedWidget
  ),
  key: key,
  actions: actions,
  title: title,
  fragment: fragment,
);

IMPORTANT Case you will use the BottomList, remember that you need pass your Scaffold in one TabController like example above.

To set actual fragment, title and bottom only make this in scaffold:

Scaffold(
  key: _fragNav.drawerKey, // Pass it to controller Drawer on back and on put fragment
  appBar: AppBar(
    title: Text(snapshot.data.title),
    actions: snapshot.data.actions,
    bottom: snapshot.data.bottom.child,
  ),
  drawer: CustomDrawer(bloc: _fragNav),
  body: ScreenNavigate(
      child: snapshot.data.fragment,
      bloc: _fragNav
  ),
)

ScreenNavigate #

In body of Scaffold, pass the ScreenNavigate like this:

ScreenNavigate(
  child: snapshot.data.fragment,
  bloc: _fragNav
)

It will make effect FadeIn on changed fragments.

Drawer #

In every item of Drawer that call one new fragment ou can do it:

ListTile(
  leading: Icon(Icons.settings, color: currentSelect == key ? Colors.white : null), //
  selected: currentSelect == key, //here and above show how you can change color of selected fragment item
  title: Text(text, style: TextStyle(color: _getColor())),
  onTap: () => _fragNav.putPosit(key: newKey),
)

Change Fragment #

To change fragment you can call in FragNavigate methods:

putPosit(key, force => default false, closeDrawer => default true); //put new fragment in stack
putAndReplace(key, force => default false, closeDrawer => default true); //put and discart atual fragment in stack
putAndClean(key, force => default false, closeDrawer => default true); //put and clean stack
jumpBack(); //back to last in stack, it is called automatically if you click in back buttom
jumpBackToFirst(); //back to first in stack and clean it

[0.1.0] - TODO: Add release date. #

  • TODO: Describe initial release.

[0.1.1] - Bug Fix #

[0.1.2] - Add FloatingAction #

  • Now you can pass FloatingAction like Actions in AppBar and Bottom on FragNavigate construct.

[0.1.3] - Bug fix #

[0.1.4] - Add lifecycle in ActionInterface of "fragments" #

[0.1.4+1] - Bug fix #

[1.0.0] - Stable #

  • Add icon and drawer title in Posit object
  • Access of list of screens and stack

example/main.dart

import 'package:fragment_navigate/navigate-bloc.dart';
import 'package:flutter/material.dart';

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

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

final String a = 'a';
final String b = 'b';
final String c = 'c';
final String d = 'd';

class Main extends StatelessWidget {
  static final FragNavigate _fragNav = FragNavigate(
      firstKey: a,
      drawerContext: null,
      screens: <Posit>[
        Posit(
          key: a,
          title: 'Title A',
          icon: Icons.settings,
          fragment: Container(color: Colors.amberAccent,)
        ),
        Posit(
          key: b,
          title: 'Title B',
          drawerTitle: 'Diff in B',
          icon: Icons.settings,
          fragment: SecondScreen()
        ),
        Posit(
          key: c,
          title: 'Title C',
          icon: Icons.settings,
          fragment: Container(color: Colors.blueAccent,)
        ),
        Posit(
          key: d,
          title: 'Title D',
          icon: Icons.settings,
          fragment: Text('qqqq')
        ),
      ],
      actionsList: [
        ActionPosit(
          keys: [a, b, c],
          actions: [
            IconButton(
              icon: Icon(Icons.add),
              onPressed: (){
                _fragNav.action('teste');
              }
            )
          ]
        )
      ],
      bottomList: [
        BottomPosit(
          keys: [a, b, c],
          length: 2,
          child: TabBar(
            indicatorColor: Colors.white,
            tabs: <Widget>[
              Text('a'),
              Text('b')
            ],
          )
        )
      ]
  );

  @override
  Widget build(BuildContext context) {
    _fragNav.setDrawerContext = context;

    return StreamBuilder<FullPosit>(
        stream: _fragNav.outStreamFragment,
        builder: (con, s){
          if(s.data != null){
            return DefaultTabController(
                length: s.data.bottom.length,
                child: Scaffold(
                  key: _fragNav.drawerKey,
                  appBar: AppBar(
                    title: Text(s.data.title),
                    actions: s.data.actions,
                    bottom: s.data.bottom.child,
                  ),
                  drawer: CustomDrawer(fragNav: _fragNav),
                  body: ScreenNavigate(
                      child: s.data.fragment,
                      bloc: _fragNav
                  ),
                )
            );
          }

          return Container();
        }
    );
  }
}

class SecondScreen extends StatelessWidget implements ActionInterface{
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.purple,);
  }

  @override
  void action(String tag, {Object params}) {
    print('called on secondScreen with tag: $tag');
  }

  @override
  void onBackPressed() {
    // TODO: implement onBackPressed
  }

  @override
  void onDie() {
    // TODO: implement onDie
  }

  @override
  void onPause() {
    // TODO: implement onPause
  }

  @override
  void onPut() {
    // TODO: implement onPut
  }

  @override
  void onReplace() {
    // TODO: implement onReplace
  }

  @override
  void onResume() {
    // TODO: implement onResume
  }
}

class CustomDrawer extends StatelessWidget {
  final FragNavigate fragNav;
  const CustomDrawer({@required this.fragNav});

  Widget _getItem({@required String currentSelect, @required text, @required key, @required icon}){
    Color _getColor() => currentSelect == key ? Colors.white : Colors.black87;

    return Material(
        color: currentSelect == key ? Colors.blueAccent : Colors.transparent,
        child: ListTile(
          leading: Icon(icon, color: currentSelect == key ? Colors.white : null),
          selected: currentSelect == key,
          title: Text(text, style: TextStyle(color: _getColor())),
          onTap: () => fragNav.putPosit(key: key),
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          DrawerHeader(
            child: Text('Drawer Header'),
            decoration: BoxDecoration(
              color: Colors.blueAccent,
            ),
          ),
          for(Posit item in fragNav.screenList.values) _getItem(
              currentSelect: fragNav.currentKey,
              text: item.drawerTitle ?? item.title,
              key: item.key,
              icon: item.icon
          )
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  fragment_navigate: ^1.0.0

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:fragment_navigate/navigate-bloc.dart';
import 'package:fragment_navigate/navigate-support.dart';
import 'package:fragment_navigate/widgets/widgets-support.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
47
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
73
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/navigate-support.dart.

Run flutter format to format lib/navigate-support.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
bloc_pattern ^2.4.2 2.5.1
flutter 0.0.0
rxdart ^0.23.1 0.23.1 0.24.0-dev.1
Transitive dependencies
collection 1.14.11 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