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

Question

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,
                      ),
                    )
                  ]),
                ),
              );
            },
          ),

user_8517355 · Answer

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 {
  List 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),
    ));
  }
}

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

1 Answers