How to create a scroll like tiktok in flutter ?

Flutter such a great framework to develop the mobile application using flutter we can create any type of complex using with ease. In this tutorial i will show you how can we make a UI like tiktok, Reels, moj like scroll in flutter.

We will use PageView to create the UI like these apps. PageView accepts multiple parameter to change te direction or initial page etc. You can also read our last article for scrollview.

So in this article i will cover PageView to create a scroll like tiktok in flutter by step by step

Step 1 : Create flutter project

Very first step is to create the fluter application using command line tool or in Android studio.

flutter create example_app

This will create a new project with name my_app then go in to the folder.

Step 2 : Create a widgets for scroll list

Now, Create a widget to scroll the content.

File : lib/TiktokScrollWidget.dart

import 'package:flutter/material.dart';
class TiktokScrollWidget extends StatelessWidget {
  final List<String> list = <String>['1', '2', '3', '4', '5'];
  TiktokScrollWidget({Key? key}) : super(key: key);
  PageController pageController = PageController(initialPage: 1);
  List<Widget> buildContainers() {
    return list
        .map((e) => Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage("https://picsum.photos/200/300"),
                  fit: BoxFit.cover),
            ),
            child: Container(
                alignment: Alignment.bottomLeft,
                margin: EdgeInsets.only(bottom: 40, left: 20),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Text(" Name of user  " + e,
                        style: TextStyle(
                            color: Colors.white, fontWeight: FontWeight.bold)),
                    Text(" subtitle  " + e,
                        style: TextStyle(color: Colors.white))
                  ],
                ))))
        .toList();

    // return [Container(
    //    // height: 200,
    //      margin: EdgeInsets.all(5),
    //      decoration: BoxDecoration(
    //          border: Border.all(color: Colors.red)
    //      ),
    //      child: Center(
    //          child:  Text(e)
    //      )
    //  ),
    //    Container(
    //      // height: 200,
    //        margin: EdgeInsets.all(5),
    //        decoration: BoxDecoration(
    //            border: Border.all(color: Colors.red)
    //        ),
    //        child: Center(
    //            child:  Text(e)
    //        )
    //    )]
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Readerstack")),
        body: PageView(
            controller: pageController,
            scrollDirection: Axis.vertical,
            children: buildContainers()),
      ),
    );
  }
}

Here as you can see we have used PageView to build the scroll view like ticktock and also created a PageController to set initial page and used scrollDirection to change the direction of scroll.

Step 3 : Add Page to main file

Add you new pages to main.dart and start navigating.

import 'package:flutter/material.dart';
import 'package:example_app/TiktokScrollWidget.dart';

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

Step 4: Run the project

Simply run the project using command line or in android studio to check the implementation.

flutter run lib/main.dart

Live Preview

How to create horizontal slide in flutter using pageview?

Flutter Pageview by default creates horizontal scroll with slide therefore we do not need to change anything in pageview so in above example we need to remove scrollDirection.

 PageView(
           controller: pageController,
           children: buildContainers()
         )

How to create horizontal slide in flutter using pageview?

Related Posts