Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add a independent ListItem in front at listview.builder in flutter

Tags:

flutter

What I want to do is to add an independent item in fron at listview.builder in flutter Like Instagram Stories the first element should be independent from the others items into the listview.builder. This is my code for listview.builder

 ListView.builder(
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemBuilder: (ctx, int) {
              return Card(
                elevation: 5,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5)),
                child: Container(
                  decoration: BoxDecoration(
                    color: Color(0xFF1f2032),
                    borderRadius: BorderRadius.circular(5),
                  ),
                  width: 130,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                    Icon(Icons.book,color: Colors.white,size: 16,),
                    SizedBox(width: 5,),
                    Text(
                      aliasName,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 14,
                        fontWeight: FontWeight.w300,
                      ),
                    )
                  ]),
                ),
              );
            },
          ),

like image 387
Wytex System Avatar asked Oct 24 '25 13:10

Wytex System


1 Answers

Please check the following code to add an independent item on top of the list.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = ['one', 'two', 'three', 'four', 'five'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test List Builder'),
      ),
      body: ListView.builder(
        itemCount: items.length + 1,
        itemBuilder: (context, int index) {
          return index == 0
              ? headerItem()
              : ListTile(title: Text(items[index - 1]));
        },
      ),
    );
  }

  Widget headerItem() {
    return ListTile(
        title: Text('Independent list item',
      style: TextStyle(color: Colors.blue),
    ));
  }
}

enter image description here

like image 130
zfnadia Avatar answered Oct 26 '25 04:10

zfnadia