كيفية تغيير ستايل الtab عند الاستخدام في فلاتر

Ahmed Mahmoud

اخر تحديث :

كيفية تغيير ستايل الtab عند الاستخدام في فلاتر

استخدام الtab من العناصر التي تستخدم في معظم التطبيقات ولكن الاغلب منا يستخدم الطريقة العاديه ويبحث عن طريقة لوضع container بداخل الtab يحتوي على curve ويكون لون الcontainer بنفس لون خلفية العناصر التي بداخلها ولتنفيذ هذه العملية يوجد طريقتين الاولى بدون استخدام اي مكتبات نهائيا والثانيه بمكتبة وفي كلا الحالات الطريقتين مشابهين لبعض ويمكنك استخدام اي منهم بدون اي مشاكل .

لقد حظي Flutter باهتمام كبير منذ إصداره الذي طال انتظاره ، ونحن سعداء به أيضًا! آمل أن يتم ترحيل عدد كبير من التطبيقات غير المتعلقة بالألعاب إلى الرفرفة ، ونتيجة لذلك ، نحن نجهز فريقنا للقيام بذلك أيضًا. لقد قمنا بتجميع برنامج Flutter التعليمي لإبعاد المطورين عن أقدامهم والبدء في تصميم التطبيقات باستخدام Flutter ، حيث توجد موارد جديدة ، ولكنها محدودة ، موزعة حول الإنترنت لتعلم الرفرفة.

تثبيت flutter تحميل flutter dartsdk شركة تطبيقات الجوال

تثبيت مكتبة tab_container

dependencies:
tab_container: ^2.0.0

كيفية عمل tabs بدون مكتبات

يمكنك باستخدام هذا الحل ان تقوم بعمل DefaultTabController للتصميم كامل وبعدها تقوم بعمل التصميم الخاص بك كما تريد وهذه الطريقة لن تحتاج فيها اي المكتبة السابقه ولا اي مكتبات وبداخل ال tabs تضع العناصر التي تريد ان تظهرها كما هو موضح بالشكل الموجود بالاعلى .

styleOne.dart

class LevelOne extends StatelessWidget {
  const LevelOne({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MainCubit, MainState>(
      builder: (context, state) {
       return DefaultTabController(
            length: 3,
            child: Scaffold(
              backgroundColor: Colors.white,
              appBar: AppBar(
                backgroundColor: Colors.redAccent,
                elevation: 0,
                bottom: const TabBar(
                    labelColor: Colors.redAccent,
                    unselectedLabelColor: Colors.white,
                    indicatorSize: TabBarIndicatorSize.label,
                    indicator: BoxDecoration(
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(10),
                            topRight: Radius.circular(10)),
                        color: Colors.white),
                    tabs: [
                      Tab(
                        child: Align(
                          alignment: Alignment.center,
                          child: Text("APPS"),
                        ),
                      ),
                      Tab(
                        child: Align(
                          alignment: Alignment.center,
                          child: Text("MOVIES"),
                        ),
                      ),
                      Tab(
                        child: Align(
                          alignment: Alignment.center,
                          child: Text("GAMES"),
                        ),
                      ),
                    ]
                ),
              ),
              body: const TabBarView(
                  children: [
                Icon(Icons.apps),
                Icon(Icons.movie),
                Icon(Icons.games),
              ]),
            )
        );
      },
    );
  }
}

كيفية عمل tabs مع انميشن بابسط طريقة

الطريقة الاخرى وهيا باستخدام المكتبة السابقه التي قمنا بتثبيتها في الاعلى وبكل بساطة انتقل الى العنصر او المكان الذي تريد ان تقوم بإظهار الtabs عنده وقم بجعلها TabContainer وضع بداخلها العناصر التي تريدها مثل حجم الradius واللون والخط عند التحديد وعدم التحديد وايضا الtabs كما هو موضح في نهايه الامر الطريقتين مشابهين لبعضهم البعض ويمكنك استخدام اي منهم بدون مشاكل .

StyleTwo.dart

class LevelOne extends StatelessWidget {
  const LevelOne({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MainCubit, MainState>(
      builder: (context, state) {
       return Scaffold(
         appBar: AppBar(),
         body: Padding(
           padding: const EdgeInsets.only(top: 15),
           child: TabContainer(
             radius: 20,
             isStringTabs: true,
             enabled: true,
             enableFeedback: true,
             selectedTextStyle:Theme.of(context).textTheme.bodyText2?.copyWith(color: Colors.white),
             unselectedTextStyle: Theme.of(context).textTheme.bodyText2?.copyWith(color:Colors.black12,fontSize: 13.0),
             color: Theme.of(context).colorScheme.secondary,
             tabs: const [
               'Tab 1',
               'Tab 2',
               'Tab 3',
             ],
             children: [
               Center(
                 child:  SwitchListTile(
                   title: const Text('Darkmode'),
                   value: false,
                   onChanged: (v) {},
                   secondary: Icon(Icons.dark_mode),
                 ),
               ),
               Center(
                 child: Container(
                   child: Text('Child 2'),
                 ),
               ),
               Center(
                 child: Container(
                   child: Text('Child 3'),
                 ),
               ),
             ],
           ),
         ),
       );
      },
    );
  }
}