Image for post
Image for post

In this post we are going to create a simple yet beautiful 404 page for our app using PositionedTransition in flutter, but before jumping in to the code lets get more familiar with this kind of animations.

PositionedTransition is animated version of Positioned which takes a specific Animation<RelativeRect> to transition the child’s position from a start position to an end position over the lifetime of the animation.

We must take note that PositionedTransition only works if it’s the child of a Stack.

Code without any animations

Here is my Code without any animations. its not something special, just a Stack with 3 children:

Scaffold(
appBar: AppBar(),
backgroundColor: const Color(0xffd8f3dc),
body: Stack(
children: [
Positioned(
top: 24,
bottom: 200,
left: 24,
right: 24,
child: Container(
child: Image.asset('images/brain.png'),
),
),
Positioned(
top: 150,
bottom: 0,
left: 24,
right: 24,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
const Text(
'404',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50,
letterSpacing: 2,
color: const Color(0xff2f3640),
fontFamily: 'Anton',
fontWeight: FontWeight.bold),
),
const Text(
'Sorry, we couldn\'t find the page!',
textAlign: TextAlign.center, …

Image for post
Image for post

I recently watched Marcin Szałeks video about complex UI where he creates some awesome animations using flutter. In this post we are going to create one of those beautiful animations.

First lets take a look at the project structure before adding animations:

home_form.dart

@override
Widget build(BuildContext context) {
return Stack(
children: [
// Works as Drawer
Scaffold(
backgroundColor: const Color(0xff22a6b3),
body:const DrawerData(),
),

// Works as Main Screen
Scaffold(
backgroundColor:Colors.white,
appBar: PreferredSize(
preferredSize: Size.fromHeight(200),
child: Container(
color: const Color(0xffee5253),
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 24, 12, 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(
icon: Icon(Icons.menu),
),
Padding(
padding: const EdgeInsets.only(top: 24,bottom: 12),
child: Text('Welcome',style: Theme.of(context).textTheme.headline4,),
),
const Text('Improve your language skill\nby selecting one of the following languages',
style: TextStyle(
fontSize: 17,
fontStyle: FontStyle.italic …

Image for post
Image for post

We can simply change flutter app theme with BloC pattern and Shared-preferences library, however we can also achieve this goal using a BloC library extension called HydratedBloc. The hydrated_bloc package is an extension of the flutter_bloc library which automatically stores states so that they can be restored even if the app is closed and opened again later. In this tutorial we are going to create a simple app and change its theme using this library.

Default app layout

Nothing special here, just a simple app with one page:

main.dart

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Theme Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity, …

Image for post
Image for post

I wanted to create a login with google button in my app and found out that it may be a little tricky, so I thought it may be good to share the steps I took.

1- Adding dependency

First step is adding google_sign_in to our project:

dependencies:
google_sign_in: ^4.5.1

and:

$ flutter pub get

There are also some required dependencies to add in our build.gradle files, first we add the following line in [project]/android/build.gradle :

dependencies {
...
// Add the google services classpath
classpath 'com.google.gms:google-services:4.3.0'}

and finally apply the plugin at the end of the [project]/android/app/build.gradle file:

// ADD THIS AT THE BOTTOM
apply plugin…

Image for post
Image for post

In Flutter we can create Collapsing app bars just like android and iOS. In this tutorial we are going to create an app bar with dynamic image as its header.

Image for post
Image for post

To add a slider in our collapsing app bar we need flutter_swiper package, so lets first add it to our pubspec.yaml:

dependencies:
flutter_swiper: ^1.1.6

We start by creating a simple Statefull widget:

class HomePage extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return _HomeState();
}
}

class _HomeState extends State<HomePage>{

@override
Widget build(BuildContext context) {
return Scaffold(
);
}
}

In order to create our app bar we need to use Silvers among CustomScrollView. Based on flutter documentation we can find these two…

About

Payam Asefi

Flutter Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store