Flutter — Horizontal Circle listview 1

Flutter is a new and rich SDK for cross platform app development for Android and iOS with was from Google. We can develop single codebase to share with both platform.

Flutter have cool set of feature which will help to make developer life easier. There are the cool feature which flutter has.

1. Based on dart language.
2. Hot reload.
3. Highly customizable UI Components.
4. Share single code base.

You can read more about flutter technical overview from this.

In this tutorial I’m gonna show you how to create Instagram story view like horizontal scroll view from flutter.

I start with creating a new project. I am using vscode as a IDE.First I create a new Project using

flutter create circlehorizontal

Any the everything get setup , Open lib/main.dart file. Remove the everything in the file. first add material package.

import 'package:flutter/material.dart';

Next we need to create the main method. That is the method which is starting point of the app.

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

runApp function will attach the given widget to the screen. MyApp is the widget we are going to create. There are two types of widget in the flutter. stateless and statefull. In stateless widget we cannot change attribute dynamically. If we need that behavior we have to use statefull widget.

In First I create a class MyApp. It is a statelesswidget. This is the code for myApp class.

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

build method is the method which will build the widget. When we change the state of the app , widget will rebuild by executing this method. I will talk about state in latter chapter. Inside build method we must return some kind of widget. in this case it is a MaterialApp widget. MaterialApp widget will provide a ability to add material component to app. The title property will show when you switch app in task manager android. home attribute will set the default route to the app. Which is show when load first time.

In next we need to implement MyHomePage widget.

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
       title: Text("circle"),
    ),
    body: Center(
       child: CircleImages()
    )
    );
    }
}

In this it create Scaffold widget with Appbar and the body. In app bar we are setting title as “circle”.In the body we are setting Center widget. And it contain CircleImages child widget. CircleImages is the custom widget we are going to create. In this we are creating a circle wiget with the image inside. This is the full code for that.

I will show to how to add horizontal scroll in next article.

Check this tutorial video — https://youtu.be/UpPerRhJ3Cg

Happy Flutter :D

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.