OnTrack Goals Habits Tracker on Autopilot

Marco Napoli — Tue, 11 Mar 2025 05:10:57 +0000

OnTrack is the app that I built to keep up with setting Goals to Build or Break habits with a twist, it’s on Autopilot…

Problem:
With tracking habits, you need to check multiple times a day to mark them done. This task is monotonous to me and I wanted to streamline this process.

Solution:
I built OnTrack Goals Habits with Autopilot to help me to set my goals to build or break habits with Auto Check-Ins, “Mark only if Missed”. That’s it, only Check-In if you missed building or breaking of that habit.

About the app:
Build or break habits with Auto Check-Ins, “Mark only if Missed” it’s on Autopilot. Accountability, streak tracking, & customizable icons. See progress in vibrant charts.

OnTrack Goal Build or Break Habits with Automatic Check-Ins, you only need to “Mark if Missed”, it’s on Autopilot.

Transform your daily routine with Goal Build or Break Habits, the sleek and intuitive habit tracker designed to help you effortlessly build positive habits or break unwanted ones. With automatic check-ins and stunning visualizations, staying on track has never been easier or more motivating.

Set personalized goals — like walking 20 minutes daily or limiting coffee to 3 cups — and let Goal sync with your habits automatically. Track your progress with colorful streak charts, monthly and weekly stats, and detailed history to keep you inspired. Choose from a wide range of activity icons to customize your journey, and use smart features like “Mark if Missed” to stay accountable.

Why Choose OnTrack?
• Automatic Check-Ins: Effortless tracking with real-time updates.
• You only need to “Mark if Missed”, it’s on auto-pilot
• Build or Break: Tailor goals for forming good habits or ditching bad ones.
• Stunning Visuals: Beautiful streak trackers, bar graphs, and progress grids in a vibrant purple design.
• Customizable Icons: Pick from fitness, financial, and more to match your goals.
• Detailed History: Review missed streaks and celebrate consistent success.
• Perfect for anyone looking to improve their life, Goal combines simplicity with powerful tools to help you achieve lasting change. Download now and start building your best habits today!
• iCloud Sync between devices

iOS App Store:

‎OnTrack Goals Habits Tracker on the App Store

‎OnTrack Goal Build or Break Habits with Automatic Check-Ins, you only need to “Mark if Missed”, it's on Autopilot. Transform your daily routine with Goal Build or Break Habits, the sleek and intuitive habit tracker designed to help you effortlessly build positive habits or break unwanted ones. With…

apps.apple.com

Website:

OnTrack Goals Habits Tracker – Pixolini – Apps

pixolini.com

Flutter Hero Animation and PageRouteBuilder Transition

Marco Napoli — Wed, 20 Jan 2021 20:59:39 +0000

Video Tutorial

Blog Article

Hero Animation and PageRouteBuilder Transition

Using Hero, Navigator and PageRouteBuilder to create custom Transitions

In this project, you are going to take a look at:

How Hero animation allows a widget transition to fly into place from one page to another
How to use the PageRouteBuilder to create custom navigation transitions with Hero animation

Hero Widget

The Hero widget is a great out-of-the-box animation to convey the navigation action of a widget flying into place from one page to another. The Hero animation is a shared element transition (animation) between two different pages.

To visualize the animation, imagine seeing a superhero flying into action. For example, you have a list of journal entries with a photo thumbnail, the user selects an entry, and you see the photo thumbnail transition to the detail page by moving and growing to full size. The photo thumbnail is the superhero, and when tapped, it flies into action by moving from the list page to the detail page and lands perfectly on the correct location at the top of the detail page showing the full photo. When the detail page is dismissed, the Hero widget flies back to the original page, position, and size.

Hero Widget Code

The Hero widget has the animation features built in; there’s no need to write custom code to handle the size and animation between pages.

The Hero child widget is marked for hero animation. When the Navigator pushes or pops a PageRoute, the entire screen’s content is replaced. This means during the animation transition the Hero widget is not shown in the original position in both the old and new routes, but it moves and resizes from one page to another. Very important, each Hero tag must be unique and match on both the originating and landing pages.

// Home Page
Hero(
  tag: 'image',
  child: Image.asset('assets/image.png'),
)
// Details page
Hero(
  tag: 'image',
  child: Image.asset('assets/image.png'),
)

PageRouteBuilder

The PageRouteBuilder class is used to create custom route transitions. PageRouteBuilder provides an Animation object. This Animation can be used with Tween and Curve objects to customize the transition animation.

You need to define a pageBuilder function to create the route's content and define the transitionBuilder function to add transition animation.

Navigator.of(context).push(
  PageRouteBuilder(
    transitionDuration: Duration(milliseconds: 1000),
    pageBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return Details();
    },
    transitionsBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        Widget child) {
      return Align(
        child: FadeTransition(
          opacity: animation,
          child: child,
        ),
      );
    },
  ),
);

How it Works

Hero Widget

The hero animation is a powerful built-in animation to convey an action by automatically animating a widget from one page to another to the correct size and position. When you navigate back to the previous page, the Hero animates back to the original position. Each Hero tag must be unique and match on both the originating and landing pages.

Navigator PageRouteBuilder

Find me on Twitter @JediPixels
For more information: JediPixels.dev

DEV Community: Marco Napoli

OnTrack Goals Habits Tracker on Autopilot

‎OnTrack Goals Habits Tracker on the App Store

OnTrack Goals Habits Tracker – Pixolini – Apps

Flutter Hero Animation and PageRouteBuilder Transition

Using Hero, Navigator and PageRouteBuilder to create custom Transitions

Hero Widget

Hero Widget Code

PageRouteBuilder

How it Works

Hero Widget

Navigator PageRouteBuilder