flutter 设置elevation,实现和android相同的效果

代码如下:

Material(
        elevation: 3,
        child: Container(
          height: 50,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
          ),
          child: TabBar(
            controller: _controller,
            isScrollable: false,
            indicatorWeight: 0.0001,
            onTap: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
            tabs: _data.map((item) {
              int index = _data.indexOf(item);
              return Container(
                width: 42,
                height: 42,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  gradient: index == _currentIndex
                      ? LinearGradient(
                    colors: [Color(0xFF42c8ee), Color(0xFF4293ee)],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  )
                      : null,
                  shape: BoxShape.circle,
                ),
                child: Wrap(
                  direction: Axis.vertical,
                  crossAxisAlignment: WrapCrossAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      item.value,
                      fit: BoxFit.contain,
                      width: 20,
                      height: 20,
                      color: index == _currentIndex ? Colors.white : null,
                    ),
                    Text(
                      item.key,
                      style: TextStyle(
                        fontSize: 10,
                        color:
                        index == _currentIndex ? Colors.white : Colors.grey,
                      ),
                    ),
                  ],
                ),
              );
            }).toList(),
          ),
        ),
      )

就是用Material组件将你的view包裹起来设置elevation就行,切勿使用card等其他view包裹!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容