Integrating Horizontal List View into Vertical List View

Integrating horizontal list views into vertical list views is a valuable technique for enhancing app interfaces. By following these step-by-step instructions, you can effectively combine these layouts to create dynamic and engaging user experiences. Let’s delve into the details of this integration.

Integrating Horizontal List View into Vertical List View

Step 1: Specify Size and Add Children

To incorporate a horizontal list view within a vertical list view, follow these steps:

Container(
  height: height,
  width: width,
  color: Colors.black,
  child: ListView(
    padding: EdgeInsets.all(height * .01),
    children: [
      const HorizontalTextListView(
          textList: ["Bacancy Technology LLP", "Ahmedabad"]),
      const HorizontalTextListView(
          textList: ["Flutter", "Dart", "Kotlin", "Android", "IOS"]),
      Row(
        children: [
          const Flexible(
              child: HorizontalTextListView(
                  textList: ["Bacancy Technology LLP", "Ahmedabad"])),
          SizedBox(
            width: width * .01,
          ),
          const Flexible(
              child: HorizontalTextListView(textList: [
            "Flutter",
            "Dart",
            "Kotlin",
            "Android",
            "IOS"
          ])),
        ],
      ),
    ],
  ),
),

Note:

• height = MediaQuery.of(context).size.height;
• width = MediaQuery.of(context).size.width;

Step 2: Create Horizontal Text Widget

class HorizontalTextListView extends StatelessWidget {
  const HorizontalTextListView({super.key, required this.textList});
  final List textList;
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;
    return Container(
      padding: EdgeInsets.all(height * 0.02),
      width: width,
      height: height * 0.16,
      child: ListView.separated(
        itemCount: textList.length,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) => TextCard(text: textList[index]),
        separatorBuilder: (context, index) => SizedBox(
          width: height * 0.02,
        ),
      ),
    );
  }
}

class TextCard extends StatelessWidget {
  const TextCard({super.key, required this.text});
  final String text;
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;
    return Container(
        padding: EdgeInsets.symmetric(
            horizontal: width * .05, vertical: height * .01),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            border: Border.all(color: Colors.white)),
        child: Center(
            child: Text(
          text,
          style: const TextStyle(fontSize: 30, color: Colors.white),
        )));
  }
}

Step 3: Adding Multiple Horizontal List Views

To add multiple horizontal list views inside a vertical list view, use the flexible widget.

ListView(
  padding: EdgeInsets.all(height * .01),
  children: [
    const HorizontalTextListView(
        textList: ["Bacancy Technology LLP", "Ahmedabad"]),
    const HorizontalTextListView(
        textList: ["Flutter", "Dart", "Kotlin", "Android", "IOS"]),
    Row(
      children: [
        const Flexible(
            child: HorizontalTextListView(
                textList: ["Bacancy Technology LLP", "Ahmedabad"])),
        SizedBox(
          width: width * .01,
        ),
        const Flexible(
            child: HorizontalTextListView(textList: [
          "Flutter",
          "Dart",
          "Kotlin",
          "Android",
          "IOS"
        ])),],    ),  ],),

By following these steps, you can seamlessly integrate horizontal list views into vertical list views to enhance your app’s user interface.

Step	Description
Step 1	Specify the size of the vertical list view and add children, including horizontal list views. A container with specified height and width contains a ListView widget with padding. Inside this ListView, there are multiple instances of the HorizontalTextListView widget, each displaying a list of texts horizontally. Additionally, a Row widget is used to display two instances of HorizontalTextListView side by side using Flexible widgets.
Step 2	Create the HorizontalTextListView widget, which displays a list of texts horizontally. This widget consists of a Container containing a ListView.separated widget. The ListView.separated widget displays the texts in a horizontal scrollable manner with separators. The TextCard widget is used to display each text item within a styled container.
Step 3	Add multiple horizontal list views inside a vertical list view using the ListView widget. Similar to Step 1, the ListView widget contains instances of HorizontalTextListView widgets. The Flexible widget is used within a Row widget to ensure proper layout when displaying multiple horizontal list views side by side.

Join Our Whatsapp Group

Join Telegram group

FAQs: Integrating Horizontal List View into Vertical List View

How can I integrate a horizontal list view into a vertical list view?

To integrate a horizontal list view into a vertical list view, you can follow these steps:

1. Specify Size and Add Children:

• Set the height and width of the container to encompass the vertical list view.
• Inside the ListView widget, include the desired horizontal list views using the HorizontalTextListView widget. You can also utilize a Row widget to arrange multiple horizontal lists horizontally.

1. Create Horizontal Text Widget:

• Define a HorizontalTextListView widget to represent each horizontal list view.
• Within this widget, construct a ListView.separated with the desired text items arranged horizontally. Customize the appearance of each text item using the TextCard widget.

1. Adding Multiple Horizontal List Views:

• To include multiple horizontal list views within the vertical list view, utilize the Flexible widget within a Row widget. This allows the horizontal lists to adjust dynamically based on available space.

What should I note while specifying the size for the vertical list view?

When specifying the size for the vertical list view, keep in mind:

• height = MediaQuery.of(context).size.height;
• width = MediaQuery.of(context).size.width;

These variables ensure that the container adequately accommodates the vertical list view and its contents.

How can I create a custom horizontal text widget?

To create a custom horizontal text widget:

1. Define HorizontalTextListView:

• Create a StatelessWidget named HorizontalTextListView.
• Pass the textList parameter to specify the list of texts to display horizontally.

1. Build Horizontal Text List:

• Construct a ListView.separated inside HorizontalTextListView.
• Customize the appearance of each text item using the TextCard widget.

Join Our Whatsapp Group

Join Telegram group

How do I add multiple horizontal list views inside a vertical list view?

To include multiple horizontal list views within a vertical list view:

• Utilize the Flexible widget within a Row widget.
• Ensure each HorizontalTextListView is wrapped with Flexible to allow for dynamic sizing and arrangement based on available space.

By following these guidelines, you can seamlessly integrate horizontal list views into vertical list views to enhance your app’s user interface.