Question 398774 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Add a widget in the tabBar

I am making the booking and orders page and I want to create a container with a shadow in my Products tab . This is what I have right now and this is what I want to obtain: enter image description here

Here it’s the code , should I do a widget? because if I add container I get a red line under .( also this happened with a SizedBox) Same I want to the orders tab .

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

  @override
  State<BookingOrdersScreen> createState() => _BookingOrdersScreenState();
}

class _BookingOrdersScreenState extends State<BookingOrdersScreen>
    with SingleTickerProviderStateMixin {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
  Stream<QuerySnapshot<Map>>? stream;
  late String currentUserID;
  TabController? tabController;
  @override
  void initState() {
    tabController = TabController(length: 3, vsync: this);
    super.initState();
    currentUserID = FirebaseAuth.instance.currentUser!.uid;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
          backgroundColor: const Color.fromARGB(255, 255, 193, 59),
          title: SizedBox(
            width: 140,
            height: 140,
  
          ),
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              bottom: Radius.circular(30),
            ),
          ),
          automaticallyImplyLeading: false),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: MediaQuery.of(context).size.height /
                  1.5, // change it on your need
              child: DefaultTabController(
                length: 2,
                child: Column(
                  children: [
                    SizedBox(
                      height: 10,
                    ),
                    TabBar(
                      tabs: [
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Icon(
                            Icons.calendar_month,
                            color: const Color.fromARGB(255, 3, 59, 161),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Icon(
                            Icons.shopping_basket,
                            color: const Color.fromARGB(255, 3, 59, 161),
                          ),
                        ),
                      ],
                    ),
                    Expanded(
                      child: TabBarView(
                        controller: tabController,
                        children: const [
                          SizedBox(
                            height: 135,
                            width: 100,
                          ),
                          Center(
                            child: Text(
                              'No orders made',
                            ),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    To create a container with a shadow in your Products tab, you can use a Container widget. The red line usually indicates a problem with the code or an unresolved issue. Let’s address that and show how to add a shadow to the container.

    Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
  color: Colors.white,
  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.2),
      spreadRadius: 2,
      blurRadius: 5,
      offset: Offset(0, 3),
    ),
  ],
  borderRadius: BorderRadius.circular(10),
),
child: Column(
  children: [
    Text(
      'Product 1',
      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
    ),
    // Add more widgets for your product here
  ],
),),),
    Login or Signup to reply.
  2. 0

    You can try this code may help.

    import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

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

  @override
  State<BookingOrdersScreen> createState() => _BookingOrdersScreenState();
}

class _BookingOrdersScreenState extends State<BookingOrdersScreen> with SingleTickerProviderStateMixin {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
  Stream<QuerySnapshot<Map<String, dynamic>>>? stream;
  late String currentUserID;
  TabController? tabController;

  @override
  void initState() {
    tabController = TabController(length: 2, vsync: this);
    super.initState();
    currentUserID = FirebaseAuth.instance.currentUser!.uid;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: const Color.fromARGB(255, 255, 193, 59),
        title: const SizedBox(
          width: 140,
          height: 140,
          child: Center(
            child: Text(
              'Booking & Orders',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(30),
          ),
        ),
        automaticallyImplyLeading: false,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: MediaQuery.of(context).size.height / 1.5,
              child: DefaultTabController(
                length: 2,
                child: Column(
                  children: [
                    const SizedBox(height: 10),
                    TabBar(
                      controller: tabController,
                      tabs: const [
                        Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Icon(
                            Icons.calendar_month,
                            color: Color.fromARGB(255, 3, 59, 161),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Icon(
                            Icons.shopping_basket,
                            color: Color.fromARGB(255, 3, 59, 161),
                          ),
                        ),
                      ],
                    ),
                    Expanded(
                      child: TabBarView(
                        controller: tabController,
                        children: [
                          Center(
                            child: Container(
                              padding: const EdgeInsets.all(16.0),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(10),
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.black.withOpacity(0.1),
                                    spreadRadius: 5,
                                    blurRadius: 7,
                                    offset: const Offset(0, 3),
                                  ),
                                ],
                              ),
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  const Text('Client Name'),
                                  const Text('Date booking:'),
                                  const Text('Time:'),
                                  const SizedBox(height: 10),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                    children: [
                                      ElevatedButton(
                                        onPressed: () {},
                                        child: const Text('Cancel'),
                                      ),
                                      ElevatedButton(
                                        onPressed: () {},
                                        child: const Text('Reschedule'),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ),
                          const Center(
                            child: Text(
                              'No orders',
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

    Explanation:-

    1. TabController Initialization: Ensure the TabController is initialized with the correct length, matching the number of tabs.
    2. Container with Shadow: Added the Container with shadow within the first tab of the TabBarView. The decoration property of the Container includes the BoxDecoration with boxShadow to achieve the shadow effect.
    3. TabBar and TabBarView: Properly configured TabBar and TabBarView to ensure correct display of tabs and their content.
    4. Padding and Layout: Ensured proper padding and layout for a clean UI.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search