Part 1

I have been developing professional Android apps for 5 years now. So the first time I approached Flutter, my first thought was: “Ok, where’s my ConstraintLayout?”. Well, that’s not the best beginning.

Flutter is AMAZING.

There are many Widgets (if you do not know this term, it’s still too early to read this article; go check flutter docs ) that are great to use and you can always find a “work-around” to feel comfortable as an Android developer.

My experience with Flutter started few months ago when I started learning everything I could, reading books, Medium articles, watching Flutter’s amazing shows on Youtube. I had a full-time job and I really couldn’t get with my hands on Flutter code though for long period of time, so I waited for the perfect moment and eventually, it came.

Photo by Patrick Fore on Unsplash

So I went to Uplabs grabbing some inspiring design I felt like it could be my “not-going-to-throw-this-after-few-days” screen for Flutter, I started coding and this is the result.

This is the final screen — All the icons are made by Freepik from www.flaticon.com

Well, I changed a lot of stuff from the original design, but I kind of feel satisfied with that.

Is this the time for Flutter’s ConstraintLayout alternative?

No. And probably it won’t be in the future. Just a little bit more and we’ll see that there is something that can be very useful but I do not feel like it is the “ConstraintLayout alternative”.

Taking for granted that you already know how to create a Flutter project, let’s create our main screen. As you can see from the image above, we need to create: a PageView (which is the “equivalent” of a ViewPager), the pages contained in it and a BottomNavigationBar.

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



class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Meditapp',

debugShowCheckedModeBanner: false,

theme: ThemeData(

primarySwatch: Colors.teal,

),

home: MyHomePage(title: ''),

);

}

}



class MyHomePage extends StatefulWidget {

MyHomePage({Key key, this.title}) : super(key: key);



final String title;



@override

_MyHomePageState createState() => _MyHomePageState();

}

This is what you should start with. Let’s go deeper. As you can see here, we’ve got a MyHomePage stateful widget. You may already know that every stateful widget has its own State widget.

class _MyHomePageState extends State<MyHomePage> {

int _currentIndex = 0;



PageController _pageController = PageController(

initialPage: 0,

keepPage: true,

); @override

Widget build(BuildContext context) {

// TODO: implement build

return null;

}

So this is what we’ve got here:

_currentIndex is an int that we are going to use to check what page the PageView is currently showing;

is an int that we are going to use to check what page the PageView is currently showing; _pageController is a controller we need to use to manipulate which page is visible in our PageView;

So here we come! Let’s create our HomePageState by inserting some Widgets. In the main screen we’ve got three widgets that are displayed: the app name (in the center above), the PageView and the BottomNavigationBar. So, the first thing you learn when approaching Flutter is that everything is a Widget and that you will surely use two of them (most of all), Columns and Rows.

Those widgets are what LinearLayout is for Android, the former for vertical axis and the latter for the horizontal axis.

Damn me, I choosed a screen that is quite “unconventional”, so I do not have any AppBar or anything else to display in the Y or X order. What I have here, is a screen where all the Widgets are overlayed and so displayed in the Z-axis (like a FrameLayout).