Flutter – Horizontal Circle listview Part 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.

Cool feature in flutter.

  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 here.

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

Implementation

First of all 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. Then 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.

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 widget with the image inside. This is the full code for that.

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

Video

My Medium Article

https://medium.com/flutterpub/flutter-1-horizontal-circle-listview-1-fc262c18fdd8

Leave a Reply