Flutter - Strange white background from a expanded with widget - firebase

Question

How can i get rid of this strange white background? I want to use weather widget in my app and i want it to be above MyGridView with buttons. I tried to do it with expanded but im always getting white background and my widget. I would like to use my weather widget as normal widget (like others) and be able to apply padding in home_screen.dart etc.
home_screen.dart
Widget build(BuildContext context) {
Color _iconColor = Colors.white.withOpacity(0.1);
double Size = MediaQuery.of(context).size.width;
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0xff362a19),
Color(0xff101011),
Color(0xff301119)
])),
child: Scaffold(
appBar: CustomAppBar(),
backgroundColor: Colors.transparent,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
//IDEALNE https://github.com/Matt-rempel/flutter-weather-app/tree/master/assets/icons
Padding(
padding: EdgeInsets.only(top: 10, left: 25),
child: Text(
'${greeting()}',
style: TextStyle(
fontFamily: 'Helvetica Bold',
fontSize: 32,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(top: 10, left: 25),
child: Text(
'Zarządzaj swoimi urządzeniami',
style: TextStyle(
fontFamily: 'Helvetica Bold',
fontSize: 16,
color: Colors.grey,
fontWeight: FontWeight.w600),
),
),
Padding(
padding: EdgeInsets.only(top: 20, left: 25),
),
Expanded(
child: CurrentWeatherPage(locations, context), //<--------------------------- HERE
),
Expanded(
child: MyGridView(),
),
],
//
),
bottomNavigationBar: Container(
padding: const EdgeInsets.only(bottom: 18.0),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
bottomLeft: Radius.circular(30.0),
bottomRight: Radius.circular(30.0),
),
child: BottomAppBar(
elevation: 0,
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: Icon(
Icons.home,
color: _iconColor,
size: 28,
),
onPressed: null),
IconButton(
icon: Icon(
Icons.tv,
color: _iconColor,
size: 28,
),
onPressed: () {
setState(() {
_iconColor = Color(0xffc5073f);
});
}),
//
IconButton(
icon: Icon(
Icons.notifications,
color: _iconColor,
size: 28,
),
onPressed: null),
IconButton(
icon: Icon(
Icons.settings,
color: _iconColor,
size: 28,
),
onPressed: null),
],
),
),
),
//
) //
),
);
}
current_weather.dart
import 'package:firebaseauthproject/models/location.dart';
import 'package:firebaseauthproject/models/weather.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'extensions.dart';
class CurrentWeatherPage extends StatefulWidget {
final List<Location> locations;
final BuildContext context;
const CurrentWeatherPage(this.locations, this.context);
#override
_CurrentWeatherPageState createState() =>
_CurrentWeatherPageState(this.locations, this.context);
}
class _CurrentWeatherPageState extends State<CurrentWeatherPage> {
final List<Location> locations;
final Location location;
final BuildContext context;
_CurrentWeatherPageState(List<Location> locations, BuildContext context)
: this.locations = locations,
this.context = context,
this.location = locations[0];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
currentWeatherViews(this.locations, this.location, this.context)
],
),
);
}
}
Widget currentWeatherViews(
List<Location> locations, Location location, BuildContext context) {
Weather _weather;
return FutureBuilder(
builder: (context, snapshot) {
if (snapshot.hasData) {
_weather = snapshot.data;
if (_weather == null) {
return Text("Error getting weather");
} else {
return Column(children: [
weatherBox(_weather),
]);
}
} else {
return Center(child: CircularProgressIndicator());
}
},
future: getCurrentWeather(location),
);
}
Widget weatherBox(Weather _weather) {
return Stack(children: [
Container(
padding: const EdgeInsets.all(15.0),
margin: const EdgeInsets.all(15.0),
height: 160.0,
decoration: BoxDecoration(
color: Colors.indigoAccent,
borderRadius: BorderRadius.all(Radius.circular(20))),
),
ClipPath(
clipper: Clipper(),
child: Container(
padding: const EdgeInsets.all(15.0),
margin: const EdgeInsets.all(15.0),
height: 160.0,
decoration: BoxDecoration(
color: Colors.indigoAccent[400],
borderRadius: BorderRadius.all(Radius.circular(20))))),
Container(
padding: const EdgeInsets.all(15.0),
margin: const EdgeInsets.all(15.0),
height: 160.0,
decoration:
BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(20))),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
getWeatherIcon(_weather.icon),
Container(
margin: const EdgeInsets.all(5.0),
child: Text(
"${_weather.description.capitalizeFirstOfEach}",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16,
color: Colors.white),
)),
Container(
margin: const EdgeInsets.all(5.0),
child: Text(
"H:${_weather.high.toInt()}° L:${_weather.low.toInt()}°",
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 13,
color: Colors.white),
)),
])),
Column(children: <Widget>[
Container(
child: Text(
"${_weather.temp.toInt()}°",
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 60,
color: Colors.white),
)),
Container(
margin: const EdgeInsets.all(0),
child: Text(
"Feels like ${_weather.feelsLike.toInt()}°",
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 13,
color: Colors.white),
)),
])
],
),
)
]);
}
Image getWeatherIcon(String _icon) {
String path = 'assets/weather/';
String imageExtension = ".png";
return Image.asset(
path + _icon + imageExtension,
width: 70,
height: 70,
);
}
class Clipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.moveTo(0, size.height - 20);
path.quadraticBezierTo((size.width / 6) * 1, (size.height / 2) + 15,
(size.width / 3) * 1, size.height - 30);
path.quadraticBezierTo((size.width / 2) * 1, (size.height + 0),
(size.width / 3) * 2, (size.height / 4) * 3);
path.quadraticBezierTo((size.width / 6) * 5, (size.height / 2) - 20,
size.width, size.height - 60);
path.lineTo(size.width, size.height - 60);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
#override
bool shouldReclip(Clipper oldClipper) => false;
}
Future getCurrentWeather(Location location) async {
Weather weather;
String city = location.city;
String apiKey = "0e97f1773e9ed9e93d3f99a91d14344f";
var url =
"https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey&units=metric";
final response = await http.get(url);
if (response.statusCode == 200) {
weather = Weather.fromJson(jsonDecode(response.body));
}
return weather;
}

Answer 1

If you put two Expanded widgets in a Column, it will try to take equal amount space. If you want to get rid of that white space change your code from this...
Expanded(
child: CurrentWeatherPage(locations, context),
),
Expanded(
child: MyGridView(),
),
to this....
Flexible(
fit: FlexFit.tight,
child: CurrentWeatherPage(locations, context),
),
Expanded(
child: MyGridView(),
),
or if you want the two widgets share equal space in column change your code from this..
body: Column(
children: <Widget>[
currentWeatherViews(this.locations, this.location, this.context)
],
),
To this..
body: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
currentWeatherViews(this.locations, this.location, this.context)
],
),