flutter 設(shè)置elevation,實現(xiàn)和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包裹起來設(shè)置elevation就行,切勿使用card等其他view包裹!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容