How do i correctly position these items horizontally in flutter to avoid overflow?

tesseract
January 7, 2023
186 views
0 votes
2 Answers

I have a list of items that are responsible for a tab bar design, i want to make all the sizedboxes display at a go and not overflow horizontally.

I will give my code for better clarification.

This is what i could come up with after over an hour of tussle:

And this is what i am expecting

I will give my code snippets of the view below.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';

class JobsHeaderWidget extends StatefulWidget {
  const JobsHeaderWidget({
    Key key,
  }) : super(key: key);

  @override
  State<JobsHeaderWidget> createState() => _JobsHeaderWidgetState();
}

class _JobsHeaderWidgetState extends State<JobsHeaderWidget> {
  List<String> items = [
    "All",
    "Critical",
    "Open",
    "Closed",
    "Overdue",
  ];

  int current = 0;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 10.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Jobs',
            style: GoogleFonts.poppins(
                color: Colors.black, fontSize: 18, fontWeight: FontWeight.w600),
          ),
          Row(
            children: [
              Text(
                'View Insights  ',
                style: GoogleFonts.poppins(
                    color: Color(0xff3498DB),
                    fontSize: 12,
                    fontWeight: FontWeight.w500),
              ),
              Icon(
                Icons.arrow_forward_ios,
                color: Color(0xff3498DB),
                size: 12,
              ),
            ],
          ),
          filterJobs()
        ],
      ),
    );
  }

  Widget filterJobs() {
    return Container(
      width: double.infinity,
      child: Column(
        children: [
          /// CUSTOM TABBAR
          SizedBox(
            width: double.infinity,
            height: 60,
            child: ListView.builder(
                physics: const BouncingScrollPhysics(),
                itemCount: items.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (ctx, index) {
                  return Column(
                    children: [
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            current = index;
                          });
                        },
                        child: AnimatedContainer(
                          duration: const Duration(milliseconds: 300),
                          margin: const EdgeInsets.all(5),
                          decoration: BoxDecoration(
                            color: current == index
                                ? Color(0xff34495E)
                                : Color(0xffF5F5F5),
                            borderRadius: BorderRadius.circular(11),
                          ),
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.only(
                                  left: 10.0, right: 10.0, top: 5, bottom: 5),
                              child: Text(
                                items[index],
                                style: GoogleFonts.poppins(
                                    fontSize: 10,
                                    fontWeight: FontWeight.w500,
                                    color: current == index
                                        ? Colors.white
                                        : Colors.grey),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  );
                }),
          ),

          // Builder(
          //   builder: (context) {
          //     switch (current) {
          //       case 0:
          //         return AllNotificationItemsView();
          //       case 1:
          //         return JobsNotificationItemsView();
          //       case 2:
          //         return MessagesNotificationItemsView();
          //       case 3:
          //         return CustomersNotificationItemsView();
          //       default:
          //         return SizedBox.shrink();
          //     }
          //   },
          // )
        ],
      ),
    );
  }
}

Answers

The reason for overflow is List View Builder. Remove it and add a Row widget instead. Iterate the list item in it and you will get your desired output.

Full Code : –

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const JobsHeaderWidget(),
    );
  }
}

class JobsHeaderWidget extends StatefulWidget {
  const JobsHeaderWidget({super.key});

  @override
  State<JobsHeaderWidget> createState() => _JobsHeaderWidgetState();
}

class _JobsHeaderWidgetState extends State<JobsHeaderWidget> {
  List<String> items = [
    "All",
    "Critical",
    "Open",
    "Closed",
    "Overdue",
  ];

  int current = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Padding(
        padding: const EdgeInsets.only(left: 10.0, right: 10, top: 5),
        child: Align(
          alignment: Alignment.topCenter,
          child: Container(
            constraints: const BoxConstraints(maxWidth: 610, maxHeight: 100),
            alignment: Alignment.center,
            width: double.infinity,
            child: IntrinsicWidth(
              child: FittedBox(
                fit: BoxFit.fitWidth,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    for (int i = 0; i < items.length; i++) ...[
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            current = i;
                          });
                        },
                        child: AnimatedContainer(
                          height: 40,
                          duration: const Duration(milliseconds: 300),
                          margin: const EdgeInsets.all(5),
                          padding: const EdgeInsets.only(
                              left: 15.0, right: 15.0, top: 5, bottom: 5),
                          decoration: BoxDecoration(
                            color: current == i
                                ? const Color(0xff34495E)
                                : const Color(0xffF5F5F5),
                            borderRadius: BorderRadius.circular(11),
                          ),
                          child: Center(
                            child: Text(
                              items[i],
                              style: GoogleFonts.poppins(
                                  fontSize: 19,
                                  fontWeight: FontWeight.w500,
                                  color: current == i
                                      ? Colors.white
                                      : Colors.grey),
                            ),
                          ),
                        ),
                      ),
                    ]
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output : –

Hey there for making the appbar not overflowing, you must use expanded widget. try to wrap your gestureDetector or whatever widget that you create for making the design for each listview child like this

 Expanded(
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      current = i;
                    });
                  },
                  child: AnimatedContainer(
                    height: 40,
                    duration: const Duration(milliseconds: 300),
                    margin: const EdgeInsets.all(5),
                    padding: const EdgeInsets.only(
                        left: 15.0, right: 15.0, top: 5, bottom: 5),
                    decoration: BoxDecoration(
                      color: current == i
                          ? const Color(0xff34495E)
                          : const Color(0xffF5F5F5),
                      borderRadius: BorderRadius.circular(11),
                    ),
                    child: Center(
                      child: Text(
                        items[i],
                        style: GoogleFonts.poppins(
                            fontSize: 12,
                            fontWeight: FontWeight.w500,
                            color: current == i ? Colors.white : Colors.grey),
                      ),
                    ),
                  ),
                ),
              ),

as you can see when you doing this the design will look like this

the text inside of the design would gone because of overflowing issue, you can change the text widget into this widget https://pub.dev/packages/auto_size_text

this is the snipet

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.only(left: 5.0, right: 5, top: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                for (int i = 0; i < items.length; i++) ...[
                  Expanded(
                    child: GestureDetector(
                      onTap: () {
                        setState(() {
                          current = i;
                        });
                      },
                      child: AnimatedContainer(
                        height: 40,
                        duration: const Duration(milliseconds: 300),
                        margin: const EdgeInsets.all(5),
                        padding: const EdgeInsets.only(
                            left: 5.0, right: 5.0, top: 5, bottom: 5),
                        decoration: BoxDecoration(
                          color: current == i
                              ? const Color(0xff34495E)
                              : const Color(0xffF5F5F5),
                          borderRadius: BorderRadius.circular(11),
                        ),
                        child: Center(
                          child: AutoSizeText(
                            items[i],
                            maxLines: 1,
                            style: GoogleFonts.poppins(
                                fontSize: 12,
                                fontWeight: FontWeight.w500,
                                color:
                                    current == i ? Colors.white : Colors.grey),
                          ),
                        ),
                      ),
                    ),
                  ),
                ]
              ],
            ),
          ),
        ));

but surely the text would be some of big and some of small look like this, and this is the result

Please signup or login to give your own answer.

Click here to cancel reply.