column and row widget how to user divider widget in flutter

Question

column and row widgets using divider horizontal line and vertical line in flutter

import 'package:basketball/colors/const.dart';
import 'package:flutter/material.dart';

class Uefa extends StatelessWidget {
  const Uefa({super.key});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              'UEFA Nations League',
              style: TextStyle(
                color: white,
                fontSize: 16,
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Text(
                'See All',
                style: TextStyle(color: liteGreen, fontSize: 16),
              ),
            ),
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Container(
          width: double.infinity,
          child: ListView.separated(
            separatorBuilder: (context, index) => SizedBox(
              height: 10,
            ),
            shrinkWrap: true,
            itemCount: 2,
            itemBuilder: (context, index) {
              return Container(
                height: size.height * 0.18,
                width: double.infinity,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: lightBlack,
                ),
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Container(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              SizedBox(
                                height: 20,
                              ),
                              Text(
                                '1/2 finals',
                                style: TextStyle(fontSize: 16, color: white),
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Text(
                                'Gibraltar vs Cyprus',
                                style: TextStyle(
                                  fontSize: 12,
                                  color: white.withOpacity(0.4),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          child: Column(
                            children: [
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    '2.40',
                                    style:
                                        TextStyle(fontSize: 16, color: white),
                                  ),
                                  SizedBox(
                                    width: 10,
                                  ),
                                  IconButton(
                                    onPressed: () {},
                                    icon: Image.network(
                                        'https://cdn-icons-png.flaticon.com/512/197/197430.png'),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            Container(
                              child: Text(
                                'Mar 21,2023 ',
                                style: TextStyle(fontSize: 16, color: white),
                              ),
                            ),
                            Container(
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Column(
                                    children: [
                                      Text(
                                        '1.70',
                                        style: TextStyle(
                                            fontSize: 16, color: white),
                                      ),
                                    ],
                                  ),
                                  SizedBox(
                                    width: 10,
                                  ),
                                  IconButton(
                                    onPressed: () {},
                                    icon: Image.network(
                                      'https://cdn-icons-png.flaticon.com/512/197/197374.png',
                                      height: 50,
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        )
                      ],
                    )
                  ],
                ),
              );
            },
          ),
        )
      ],
    );
  }
}

is it just two item, or you want listView – Md. Yeasin Sheikh Mar 27 '23 at 16:58 — Md. Yeasin Sheikh, Mar 27 '23 at 16:58

score 0 · Accepted Answer · answered Mar 27 '23 at 18:06

You can do it this way:

Row -> [Left Side, Right Side]

Left Side -> [Column]

Right Side -> [Column -> Row, Row]

Somewhat working example would be

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      themeMode: ThemeMode.dark,
      theme: ThemeData.dark(
        useMaterial3: true,
      ).copyWith(
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.green),
      ),
      home: Builder(builder: (context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('UEFA Matches'),
          ),
          body: const Uefa(),
        );
      }),
    ),
  );
}

class Uefa extends StatelessWidget {
  const Uefa({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              'UEFA Nations League',
              style: Theme.of(context).textTheme.bodyLarge,
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: TextButton(
                onPressed: () {},
                child: const Text('See All'),
              ),
            ),
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Expanded(
          child: ListView.separated(
            separatorBuilder: (context, index) => const SizedBox(
              height: 10,
            ),
            itemCount: 2,
            itemBuilder: (context, index) {
              return Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: const Color(0xFF212830),
                ),
                child: Row(
                  children: [
                    Expanded(
                      flex: 3,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 20),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '1/2 finals',
                              style: Theme.of(context).textTheme.titleLarge,
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Text(
                              'Gibraltar vs Cyprus',
                              style: Theme.of(context).textTheme.bodySmall,
                            ),
                            const SizedBox(
                              height: 30,
                            ),
                            Text(
                              'Mar 21,2023 ',
                              style: Theme.of(context).textTheme.bodyLarge,
                            ),
                          ],
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(
                                color: Theme.of(context)
                                    .dividerColor
                                    .withOpacity(0.25),
                                width: 2),
                          ),
                        ),
                        child: Column(
                          children: [
                            Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text(
                                    '2.40',
                                    style:
                                        Theme.of(context).textTheme.bodyLarge,
                                  ),
                                  const SizedBox(
                                    width: 10,
                                  ),
                                  IconButton(
                                    onPressed: () {},
                                    icon: Image.network(
                                      'https://cdn-icons-png.flaticon.com/512/197/197430.png',
                                      height: 40,
                                      width: 40,
                                      fit: BoxFit.scaleDown,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            const Opacity(opacity: 0.25, child: Divider()),
                            Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text(
                                    '1.70',
                                    style:
                                        Theme.of(context).textTheme.bodyLarge,
                                  ),
                                  const SizedBox(
                                    width: 10,
                                  ),
                                  IconButton(
                                    onPressed: () {},
                                    icon: Image.network(
                                      'https://cdn-icons-png.flaticon.com/512/197/197374.png',
                                      height: 40,
                                      width: 40,
                                      fit: BoxFit.scaleDown,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              );
            },
          ),
        )
      ],
    );
  }
}

Output:

column and row widget how to user divider widget in flutter

1 Answers1