0

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,:

introducir la descripción de la imagen aquí

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

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."),
    );
  }
}
2
  • No tengo ni idea de cuál es tu pregunta. Te podría ayudar, quizás, si la entendiera, pero por más que la leo, no la entiendo XD. ¿Qué quieres hacer exactamente? Si quieres que tu ejemplo se parezca al de la foto, ¿por qué le metes una sombra? No termino de entender cuál es tu problema. Si lo replanteas, quizás pueda echarte una mano.
    – Manuel
    Commented el 7 jul. 2021 a las 10:27
  • Gracias por tu respuesta, ya replanteé la pregunta, si, quisiera que se vea con el ejemplo que doy, que se vean las tarjetas por debajo de la barra de navegación, a mi me queda un cuadrado blanco, no logro hacer ese efecto Commented el 7 jul. 2021 a las 16:55

1 respuesta 1

1

lo que puedes hacer es añadir un color transparente al Container y eliminar la sombra como sigue:

bottomNavigationBar: Container(
   decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(400),
      color: Colors.transparent,
   ),
),

Y no te olvides de en el Scaffold poner en true el extendBody: true

return Scaffold(
      extendBody: true,
      ...

Y una sugerencia más trata de separar los widgets creando nuevos no usando métodos, es decir la función _fondoapp() la puedes separar en un nuevo StatelessWidget y así los demás class FondoApp extends StatelessWidget; y en caso de que sean widgets muy pequeños puedes añadirlo directamente como hijos.

También trata de usar const donde sepas que el estado no va a cambiar por ejemplo:

padding: const EdgeInsets.all(20.0),
1
  • Excelente, muchas gracias, pude resolver mi problema gracias a ti, y pondré en practica tus consejos, gracias nuevamente Commented el 9 jul. 2021 a las 17:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.