DEV Community: Lakshmi Warrier

Basic Hero Animation

Lakshmi Warrier — Sun, 06 Feb 2022 19:21:39 +0000

We all like a pinch of animation in everything, don't we?

Curious by the word Hero in Flutter, I decided to check it out and implement a very basic, yet satisfying app that would just zoom a pic when clicked.

For Hero, there is no need for getting a separate dependency.

Get to the point!
Assuming you are familiar with Flutter, let's get started!

Create a new Flutter project

Feel free to name it anything you feel is right, I named it hero_animation. Open the main.dart file in the demo app Flutter provides and clear the body in the build method looks like this:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(children: <Widget>[]));
  }
}

For visualising the Hero animation in a better way, I decided to put the image that I plan to animate at the bottom left of the screen using the MainAxisAlignment.end property of the column widget.
Before adding the hero effect, I would suggest you build the basic look of your app which is just an image and a text inside a card here.

I also noticed that the effect was so visually appealing when I used a transparent image.
I downloaded a transparent image as dashatars.png to the assets folder that I made in the root directory of my app. Don't forget to add the image in pubspec.yaml.

flutter:
  assets:
    - assets/

Making the card widget

Since my card had an image and text, I used a column widget as its child. I also added necessary paddings to make it look better than the default style.

Card(
  child: Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
          child: Image.asset(
            "assets/dashatars.png",
            height: 100,
          ),
        ),
       const Padding(
         padding: EdgeInsets.all(8.0),
           child: Text(
             "Meet Dash!",
             style: TextStyle(color: Colors.blue, fontSize: 20),
           ))]))

You can also use Image.network(url) instead of Image.asset(path).
Following my steps would have given you this screen 👇

This image is not clickable now, let's wrap the card with a GestureDetector and make it take us to the next page on tapping the card.

The wrapping can be easily done by 'Wrap widget with...' option in Ctrl + . in Visual Studio Code, or by clicking the small yellow bulb that pops up in the left.

GestureDetector(
  child: Card(...),
  onTap: () {
    Navigator.push(
      context,
      PageRouteBuilder(
        transitionDuration: const Duration(milliseconds: 2000),
          pageBuilder: (_, __, ___) => const SecondPage()));
  },
 )

The card should recieve clicks now.

Even though a MaterialPageRoute can be used easily, I chose PageRouteBuilder because it had the transitionDuration property which gave a nicer and more visible animation.

At this point, you would get an error stating SecondPage() does not exist. Let's fix that!

Make the second page

Inside the lib/ directory, create a new file, second_pg.dart. Make a stateless widget SecondPage.

Typing stless in VSCode would create all the boilerplate code and you will just have to type in the class name.

Now, this is where we would show the bigger image of Dash and write a short description.
Remove the container, and make it a Scaffold with a default AppBar and a body.
The body would have a Column wrapped in a Center widget with two children - the Dash image and the description.
I set the height of the image to 300 so that the growth of the image is clear. For the text description, I used an Expanded widget so that it looks good.
For the code to not be congested with the description, before the return statement of the build method, create a field const description = "This is Dash, a chubby hummingbird, the mascot of Flutter and Dart.\n\nDash was originally a Dart mascot, not a Flutter mascot.\n\nEarly on, a hummingbird image was used to represent Dart. The hummingbird represents that Dart is a speedy language.\n\nMega-Dash, a life-sized mascot is currently resting in a locked-down Google office."

body: Center(
        child: Column(
          children: [
            Image.asset(
                "assets/dashatars.png",
                height: 300,
              ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.blue.shade100,
                  borderRadius: const BorderRadius.only(
                      topRight: Radius.circular(30),
                      topLeft: Radius.circular(30))),
                child: Text(description,
                    style: TextStyle(fontSize: 16),
     ),),)],),)

Running the app should look like this. The screen just changes without any animation.

Now that the basic UI is done, let's make the image a hero

Make Dash fly like a Hero

Head to main.dart, wrap the GestureDetector with a Hero() widget. This will tell you that a parameter tag is required. Set the tag as "dash". This tag helps Flutter recognise a Hero in both pages so that the animation can be done.
The code now looks like this:

body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Hero(
            tag: "dash",
            child: GestureDetector(...))])

Now, head to second_pg.dart and tell Flutter that the small image in the first screen should be grown to the image shown in second screen. Use the same tag "dash" here too.

 Center(
   child: Column(
     children: [
       Hero(
         tag: "dash",
         child: Image.asset(
           "assets/dashatars.png",
           height: 300,
          ),
        ),]))

Now run the app, you can see the small image gracefully growing when the screen changes. 🦸‍♀️

Making something fly in or out of the screen is far better than the default boring page transition. Advanced forms of Hero animations takes page transition to the next level and it gives a zest to the app with minimal effort.

Dual booting Windows 10 and Ubuntu 20.04 - with RST issue fixed

Lakshmi Warrier — Sun, 29 Nov 2020 11:41:47 +0000

Disclaimer: Steps after taking ISO image can quite vary with respect to the laptop that you use. This blog helps best for the ones using Acer Aspire 7 (i5, 9th gen)
Caution: not a very big tech-freak, more of a story-teller 😁

Fix the Turn off RST right away
Why Ubuntu/Linux?
If you are a person who's fed up of downloading millions of stuffs from different sources for a software and still facing errors like something's missing or a person who's lazy enough to move your mouse around, Linux OS would be better for you 😏

Preferable Pre-requisites:

4+ GB RAM
If Windows 10 is pre-installed, you do not need to worry if Linux can be dual-booted in your system. It surely can.
30+ GB of continuous free space to spare. (Preferably 60+ GB if you are going to use Linux regularly)
A USB of 4+ GB capacity for storing Ubuntu ISO file for dual booting

So, all the best and let's begin

Step 0: Back up everything (optional) - I didn't though

Step 1: Download the ISO image of Ubuntu.

By default it gets downloaded into Software in C:/ though it doesn't matter much where it gets downloaded.

While you're at it, let's make a bootable USB

Step 2: Making a bootable/live USB

Even though I used Universal USB Installer for creating a bootable USB, there are other software too like Rufus and UNetbootin which might require a download.

Plug in your USB.

In UUI, clicking on the "Download UUI" will bring up a new tab and choose your file location to save it. Go to the location where you have the file and follow:

Select your installed Linux Distribution, in this case, Ubuntu
and browse-select its ISO file.

Now, choose the USB which is to be made bootable and format it if you wished to. I didn't though, because I had enough space for Ubuntu ISO File too.

Click on CREATE and you hold a bootable USB in your hand now.

Step 3: Shrink and create space for Ubuntu

For that, open Disk Management and right click on C:
P.S. : I took this screen print months after dualbooting Ubuntu

Choose Shrink Volume...
A window with the image as a part of it pops up. Ideally, type in 20000

As the process gets completed you'll find unallocated space and that's where Ubuntu will live.

Step 4: Boot into Ubuntu and see if there's an issue due to RST in your system.

Find Boot Sequence Key. For Acer Laptops, it's F12 .

Reboot your system with USB plugged in and continuously press F12 . Choose Ubuntu and wait till it loads.
A page like this will be loaded.

But when you try to Install Ubuntu you'll get this screen...

So, yep... That's the whole reason I'm writing this. Also, I'm just a beginner and not much exposed to the words like UEFI/Legacy, SATA- AHCI/RAID/IDE and all. So, until I learn about them, all I can do is type out a solution that worked, without wiping off the pre-installed Windows 10
Anyway, click on the restart option and get back into Windows.

Step 5 Fixing the issue

In Windows, open up command prompt as an administrator (Run as administrator) and type in

bcdedit /set {current} safeboot minimal

Find your BIOS setup key. For Acer Laptops it's F2 .
Reboot your system with USB plugged in and continuously press F2
It should take you to BIOS setup.
In my laptop, pressing Ctrl + S in Main tab listed every advanced options.

On the information page itself new rows get added and search for SATA mode and change it to AHCI instead of RAID (or in rare cases, IDE)

For some of non-Acer laptops, this option is named as Storage in Configuration tab.

A frightening question will be asked,

All existing data stored on the drives will be erased when resetting the controller mode. Do you want to proceed? [Yes] [No]

Don't worry, nothing will happen. Select YES
Press F10 and come out of BIOS and you will be automatically taken to safe boot mode. This just ensures that your Windows is okay to proceed with dual booting.
Open Command Prompt and press enter after typing in

bcdedit /deletevalue {current} safeboot

Step 6: Setting Sails

Restart the system and now, choose Ubuntu from the boot menu (or Try Ubuntu, if it exists).

I followed this site for rest of the steps and VOILA, your Ubuntu is ready to use

Not gonna lie: A 50+ clicks and tiring setups on Windows while software installation is replaced by just a single line on Terminal Window, sudo apt install ___
Good Luck! Keep Learning

Courtesy: My tech-freak dad, loads and loads of websites, YouTube tutorials and two whole days