How to dim the tabar like in the picture?

Question

I am developing a featured news app, how do I make a blur tabar like in the picture

Answer 1

I see that you are new to StackOverflow and may not be familiar with how to post questions. With that said, I have done a little bit of work and prepared a possible solution for you to use. It is only one solution of many and needs some work to fit your needs (which we don't know). Please, in the future, be sure to post what you have tried with your code so that others can assist you in how to solve problems. I used a RichText on the last word, in which I have separated the word into letters. I then changed the opacity of each letter for that word. Please see the code below.

import 'package:flutter/material.dart';

void main() {
  runApp(const TabBarDemo());
}

class TabBarDemo extends StatefulWidget {
  const TabBarDemo({Key? key}) : super(key: key);

  @override
  State<TabBarDemo> createState() => _TabBarDemoState();
}

class _TabBarDemoState extends State<TabBarDemo>
    with SingleTickerProviderStateMixin {

  late TabController _tabController;
  late List<Tab> myTabs = <Tab>[];
  // the words I want in my tabs.
  final List<String> _words = ['All', 'Military', 'Discover', 'Technology'];
  late List<TextSpan> listOfTextSpans = [];
  late RichText _richText;

  @override
  void initState() {
    super.initState();
    for (var element in _words) {
      myTabs.add(Tab(text: element));
    }
    List<String> letters = _words.last.iterable().toList();

    _formatWord(letters);

    _richText = RichText(
      text: TextSpan(
        text: '',
        style: DefaultTextStyle.of(context).style,
        children: listOfTextSpans,
      ),
    );

    _tabController = TabController(vsync: this, length: myTabs.length);
  }

  void _formatWord(List<String> letters) {
    for (var i = 0; i < letters.length; i++) {
      double _opacity = 1.0 - (i / 10);
      listOfTextSpans.add(
        TextSpan(
            text: letters[i],
            style:
                TextStyle(color: Colors.grey.shade300.withOpacity(_opacity))),
      );
    }
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 4,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: const Color(0xff6ECAB8),
            bottom: TabBar(
              controller: _tabController,
              indicator: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(
                  Radius.circular(0),
                ),
              ),
              indicatorWeight: 2,
              indicatorPadding:
                  const EdgeInsets.only(top: 40, left: 30, right: 30),
              tabs: myTabs
                  .map(
                    (Tab tab) => myTabs.last == tab
                        ? FittedBox(
                            child: _richText,
                          )
                        : FittedBox(
                            child: Tab(child: Text('${tab.text}')),
                          ),
                  )
                  .toList(),
            ),
            title: const Text('Tabs Demo'),
          ),
          body: TabBarView(
            controller: _tabController,
            children: myTabs.map((Tab tab) {
              return Center(child: Text('${tab.text}'));
            }).toList(),
          ),
        ),
      ),
    );
  }
}

extension on String {
  Iterable<String> iterable({bool unicode = false}) sync* {
    if (unicode) {
      var iterator = Characters(this).iterator;
      while (iterator.moveNext()) {
        yield iterator.current;
      }
    } else
      for (var i = 0; i < length; i++) {
        yield this[i];
      }
  }
}

Here is an image of what I have done.