How to Render ListView(as Row) Inside ListView(as Column) In Flutter?

We can add horizontal list view inside vertical list view, below is step-by-step solution.

Step 1 : Specify size of vertical list view and add children.

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 text widget for horizontal view.

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: If you want to add 2 horizontal list view inside vertical list view, then use 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"
        ])),],    ),  ],),

Output:-