Skip to main content
Gramática, explicación
Origen Enlace

buen día, tengo un problema con un diseño que estoy recreando, quisiera que mi barra de navegación se viera algovea como esto eneste ejemplo que les muestro a continuación donde la parte del BottomNavBarbarra tiene el fondo transparente y al hacer scroll, los elementos van pasando por debajo de la barra,:

Pero no logro hacer el container que almacena el Bottom Bar transparente, cree unos containers redondeados para simular lo que va a llevar el producto final, pero me queda algo así, con el fondo blanco, al hacer el scroll hacia abajo, salen los cuadros morados del contenedor, y se mira muy feo, ya traté con Colors.transparent, pero no obtengo resultados, quizá estoy empaquetando Widgets mal, no lo sétransparente como en el ejemplo, quisiera saber sus posibles solucionesle añadí una sombra extra al diseño para llegar a obtenerhacerlo ver un poquito más estético, pero el BottomNavBar como enobjetivo es que mis elementos del scroll se vean cómo pasan por debajo de la fotobarra al igual que les muestroel ejemplo

buen día, tengo un problema con un diseño que estoy recreando, quisiera que se viera algo como esto en la parte del BottomNavBar:

Pero no logro hacer el container que almacena el Bottom Bar transparente, cree unos containers redondeados para simular lo que va a llevar el producto final, pero me queda algo así, con el fondo blanco, al hacer el scroll hacia abajo, salen los cuadros morados del contenedor, y se mira muy feo, ya traté con Colors.transparent, pero no obtengo resultados, quizá estoy empaquetando Widgets mal, no lo sé, quisiera saber sus posibles soluciones para llegar a obtener el BottomNavBar como en la foto que les muestro

buen día, tengo un problema con un diseño que estoy recreando, quisiera que mi barra de navegación se vea como este ejemplo que les muestro a continuación donde la barra tiene el fondo transparente y al hacer scroll, los elementos van pasando por debajo de la barra,:

Pero me queda algo así, con el fondo blanco y no transparente como en el ejemplo, le añadí una sombra extra al diseño para hacerlo ver un poquito más estético, pero el objetivo es que mis elementos del scroll se vean cómo pasan por debajo de la barra al igual que el ejemplo

Origen Enlace

Flutter CupertinoTabBar Transparente

buen día, tengo un problema con un diseño que estoy recreando, quisiera que se viera algo como esto en la parte del BottomNavBar:

introducir la descripción de la imagen aquí

Pero no logro hacer el container que almacena el Bottom Bar transparente, cree unos containers redondeados para simular lo que va a llevar el producto final, pero me queda algo así, con el fondo blanco, al hacer el scroll hacia abajo, salen los cuadros morados del contenedor, y se mira muy feo, ya traté con Colors.transparent, pero no obtengo resultados, quizá estoy empaquetando Widgets mal, no lo sé, quisiera saber sus posibles soluciones para llegar a obtener el BottomNavBar como en la foto que les muestro

introducir la descripción de la imagen aquí

Les dejo mi código, si aparte de ayudarme, me pudieran explicar se los agradecería bastante

import 'package:flutter/cupertino.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:flutter/material.dart';

class MenuInicial extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          _fondoapp(),
          SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Padding(padding: EdgeInsets.fromLTRB(0, 40, 0, 0)),
                _iconos(),
                _botonesRedondeados(),
              ],
            ),
          )
        ],
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(400),
            boxShadow: <BoxShadow>[
              BoxShadow(
                spreadRadius: -15,
                color: Colors.black38,
                offset: Offset(0, 0),
                blurRadius: 12,
              )
            ]),
        padding: EdgeInsets.all(20),
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(50)),
          child: Theme(
            data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
            child: CupertinoTabBar(
              activeColor: Colors.pink,
              items: [
                BottomNavigationBarItem(icon: Icon(Icons.home)),
                BottomNavigationBarItem(icon: Icon(Icons.add_outlined)),
                BottomNavigationBarItem(
                    icon: Icon(
                  FontAwesomeIcons.handHoldingUsd,
                  size: 24,
                )),
                BottomNavigationBarItem(icon: Icon(Icons.account_circle)),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _botonesRedondeados() {
    return Table(
      children: [
        TableRow(children: [
          _crearBotonesRedondeado(),
          _crearBotonesRedondeado(),
        ]),
        TableRow(children: [
          _crearBotonesRedondeado(),
          _crearBotonesRedondeado(),
        ]),
        TableRow(children: [
          _crearBotonesRedondeado(),
          _crearBotonesRedondeado(),
        ]),
        TableRow(children: [
          _crearBotonesRedondeado(),
          _crearBotonesRedondeado(),
        ]),
      ],
    );
  }

  Widget _crearBotonesRedondeado() {
    return Container(
      height: 180.0,
      width: 111,
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
          color: Color.fromRGBO(62, 66, 197, 0.7),
          borderRadius: BorderRadius.circular(40)),
    );
  }

  Widget _fondoapp() {
    return Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.white,
    );
  }

  Widget _iconos() {
    return SafeArea(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          //Padding(padding: EdgeInsets.fromLTRB(10, 40, 10, 10)),

          _cajalocalizacion(),

          _message(),
        ],
      ),
    );
  }

  Widget _message() {
    return Container(
      padding: EdgeInsets.fromLTRB(60, 0, 0, 0),
      height: null,
      child: Image(
        image: AssetImage('assets/imagenes/message.png'),
        fit: BoxFit.contain,
      ),
    );
  }

  Widget _location() {
    return Container(
        padding: EdgeInsets.fromLTRB(12, 4, 0, 0),
        height: null,
        child: Image(
          alignment: Alignment.center,
          image: AssetImage('assets/imagenes/689757-200.png'),
          fit: BoxFit.none,
        ));
  }

  Widget _cajalocalizacion() {
    return Container(
        padding: EdgeInsets.fromLTRB(100, 0, 0, 0),
        child: Stack(children: <Widget>[
          _contornocaja(),
          _location(),
          _textolocalizacion(),
        ]));
  }

  Widget _contornocaja() {
    return Container(
      height: 28.0,
      width: 170.0,
      decoration: BoxDecoration(
        color: Colors.grey.shade200,
        borderRadius: BorderRadius.circular(90.0),
      ),
    );
  }

  Widget _textolocalizacion() {
    return Container(
      padding: EdgeInsets.fromLTRB(40, 8, 0, 0),
      child: Text("Tlaquepaque, Jal."),
    );
  }
}