Horizontal Circle List View in Flutter

Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang Horizontal Circle List View in Flutter.  Seringkali kita melihat sebuah image dalam bentuk kontak, pada kali ini saya ingin memberitahukan kepada teman-teman bagaimana cara membuat image dalam bentuk lingkaran serta melakukan scroll view horizontal. Pada flutter kita bisa menggunakan widget Circle Avatar.

Step 1. Tambahkan Image

Buatlah sebuah folder lalu tambahkan image seperti berikut

Step 2. Tambahkan Asset Images

Tambahkan asset images pada pubspec.yml seperti berikut

Step 3. Membuat Circle Avatar

Container(
                child: Column(
                  children: [
                    CircleAvatar(
                      radius: 50,
                      backgroundImage: AssetImage(‘images/user_1.png’),
                    ),
                  ],
                ),
              ),

Complete Code

import ‘package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ‘Flutter Demo’,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(“Horizontal Circle List View”),
        ),
        body: Center(
            child: Container(
          height: 200,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
              Container(
                child: Column(
                  children: [
                    CircleAvatar(
                      radius: 50,
                      backgroundImage: AssetImage(‘images/user_1.png’),
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: 20,
              ),
              Container(
                child: Column(
                  children: [
                    CircleAvatar(
                      radius: 50,
                      backgroundImage: AssetImage(‘images/user_2.png’),
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: 20,
              ),
              Container(
                child: Column(
                  children: [
                    CircleAvatar(
                      radius: 50,
                      backgroundImage: AssetImage(‘images/user_3.png’),
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: 20,
              ),
              Container(
                child: Column(
                  children: [
                    CircleAvatar(
                      radius: 50,
                      backgroundImage: AssetImage(‘images/user_4.png’),
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: 20,
              ),
              Container(
                child: Column(
                  children: [
                    CircleAvatar(
                      radius: 50,
                      backgroundImage: AssetImage(‘images/user_5.png’),
                    ),
                  ],
                ),
              ),
            ],
          ),
        )));
  }
}

Hasil Run : 

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat mencoba 🙂

Subscribe

Related articles

Cara Memakai Single Child Scroll View

Halo teman-teman, pada artikel kali ini saya akan membahas...

Control Flow pada Dart

Control Flow Control flow adalah cara mengontrol alur dari sebuah...

Mengintegrasikan Project Flutter dengan Firebase

Setelah itu kita masuk ke halaman Add Firebase to...

Navigation & Route Navigation Flutter

Navigation dan Routing merupakan konsep inti dalam pengembangan Aplikasi...

Website Terbaik untuk Belajar Flutter

Flutter dan Dart adalah framework dan bahasa pemrograman untuk...

LEAVE A REPLY

Please enter your comment!
Please enter your name here