0
I would like a Scrollview with a fixed container in the footer because in it I will position a banner of admob but I cannot fix this container I want it to be independent of the scrollview and always be fixed on the screen but I was not successful, an example of how it should be:
My current code name:
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: constraints.copyWith(
minHeight: constraints.maxHeight,
maxHeight: double.infinity,
),
child: IntrinsicHeight(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 18, right: 18, top: 15, bottom: 15),
width: MediaQuery.of(context).size.width,
child: Text(
"Ferramentas",
style: TextStyle(
color: Color(0xFF808080),
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
Container(
height: 0.5,
width: MediaQuery.of(context).size.width,
color: Colors.black38,
),
Container(
margin: EdgeInsets.only(left: 0, right: 0, top: 5, bottom: 5),
alignment: Alignment.centerLeft,
child: ResponsiveGridRow(
children: [
ResponsiveGridCol(
xs: 6,
xl: 2,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => GasolinaXAlcool(),
),
);
},
child: Container(
height: 110,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'images/gasolina.png',
width: 50,
),
Text(
'Gasolina ou Álcool?',
textAlign: TextAlign.center,
)
],
),
),
),
),
ResponsiveGridCol(
xs: 6,
xl: 2,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => QuantoGasto(),
),
);
},
child: Container(
height: 110,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'images/moedas.png',
width: 50,
),
Text(
'Quanto vou gastar?',
textAlign: TextAlign.center,
)
],
),
),
),
),
ResponsiveGridCol(
xs: 6,
xl: 2,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MediaSimples(),
),
);
},
child: Container(
height: 110,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'images/grafico.png',
width: 50,
),
Text(
'Média de Consumo / \n\ KM Percorrido',
textAlign: TextAlign.center,
)
],
),
),
),
),
ResponsiveGridCol(
xs: 6,
xl: 2,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MediaCompleta(),
),
);
},
child: Container(
height: 110,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'images/mediagrafico.png',
width: 50,
),
Text(
'Média de Consumo / \n\ KM Inicial / Final',
textAlign: TextAlign.center,
)
],
),
),
),
),
ResponsiveGridCol(
xs: 6,
xl: 2,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Premium(),
),
);
},
child: Container(
height: 110,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'images/avalie.png',
width: 50,
),
Text(
'Seja Premium \n\ (Remove anúncios)',
textAlign: TextAlign.center,
)
],
),
),
),
),
],
),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 100,
decoration: BoxDecoration(
color: Colors.red
),
) // Your footer widget
),
),
],
),
),
),
);
}));
}
}
I tried this way but the container is depending on the scrollview. If I turn, the phone is down there and would not like that. I need it to stay fixed at the bottom, not dependent on scrollview so it’s always visible.
The basics of this approach is to separate the components. The screen of 2 children then she has a
Column. The first is the component with the scrolling, the second is its button. As you want to fix the button at the end the other component needs to occupy the rest of the screen space. I would just try to involve the first one with aExpanded. Depending on the components you are going to use, you can generate some conflict but you can solve it by reading the messages that the log returns. Try something on this implementation line.– Leonardo Paim