Flutter - 带有小部件的扩展的奇怪白色背景

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)
    ],
  ),