底部溢出 99397 像素的 RenderFlex

Question

import 'package:flutter/material.dart';
import 'package:http_request/carditem.dart';
import 'package:http_request/user_data.dart';

// here we chose to have statefull widget because the state needs to be updated and we need to update some variables according to some conditions.
class UserScreen extends StatefulWidget {
  const UserScreen({Key key}) : super(key: key);

  @override
  _UserScreenState createState() => _UserScreenState();
}

class _UserScreenState extends State<UserScreen> {
  // here we created a variable to keep our information in it . this information comes from our user data class where we get the user data from http requests.
  Map<String, dynamic> userinfo = {};

  // this method is called as soon as the main widget is created . we call our http method here to have the live data as soon as we open the app .be aware that we cant use async and await here . we just call the method.
  @override
  void initState() {
    super.initState();
    getData();
  }

  // here we get hte live data from our userdata class .
  Future getData() async {
    //we create a userData object to get access to the getuserdata method.
    UserData userData = UserData();
    //we handle any error here
    try {
      // here we create a variable to the exact same type we are expecting .
      //then we wait for the result of calling our userdata information.
      Map<String, dynamic> data = await userData.getUserData();
      // we call setState because we need to update a certain value here.
      setState(() {
        //we assign the the value of data to our variable called userinfo .try the reaosn we see no error behind them is that they are the same type.
        userinfo = data;
      });
      // we catch errors here .
    } catch (e) {
      print(e);
    }
  }

  // our nice build method ...this method is from our stateful class.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Work Harder'),
        centerTitle: true,
      ),
      body: ListView.builder(
        itemBuilder: (context, index) => CardItem(
          firstName: userinfo['firstName'],
          avatarLink: userinfo['avatarLink'],
          id: userinfo['id'],
          lastName: userinfo['lastName'],
          email: userinfo['email'],
        ),
      ),
    );
  }
}

as you can see here is my user_screen dart file the problem is when i hot reload the app  is see the renderflex error, while everything seems fine. im  a begginner in flutter and i would really appreciate your help.

我試過單子滾動視圖、列表視圖、擴展小部件，但它不起作用。 請幫我熱啟動可能沒有這些長錯誤的應用程序

import 'package:flutter/material.dart';

// we chose stateless because we don't need to change the state of our app.
class CardItem extends StatelessWidget {
  const CardItem({
    Key key,
    this.firstName,
    this.email,
    this.avatarLink,
    this.id,
    this.lastName,
  }) : super(key: key);
  final String firstName;
  final String email;
  final String avatarLink;
  final String id;
  final String lastName;

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.lightBlueAccent[200],
      elevation: 3,
      shadowColor: Colors.blue[100],
      child: Column(
        children: [
          Stack(
            children: [
              ListTile(
                leading: Icon(Icons.check_box),
                trailing: CircleAvatar(
                  child: Image.network(avatarLink),
                ),
                title: Text(firstName),
                subtitle: Text(lastName),
              ),
              Positioned(
                left: 48,
                top: 15,
                child: Text(
                  id,
                  style: TextStyle(
                    color: Colors.white70,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Positioned(
                left: 120,
                top: 30,
                child: Text(
                  'Email :  $email',
                  style: TextStyle(
                    color: Colors.blue[900].withOpacity(0.6),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

 

這是我的卡片小部件，如果有幫助的話。

import 'dart:convert';

import 'package:http/http.dart' as http;

// this is the file for our main http requests.
class UserData {
  UserData({
    this.firstName,
    this.lastName,
    this.email,
    this.id,
    this.avatarLink,
  });
  final String firstName;
  final String lastName;
  final String email;
  final String id;
  final String avatarLink;

  //this method is response for getting the live data we want also its responsible for decoding it with 'dart convert' library and returning the result as an output.
  Future getUserData() async {
    //the url we are working with
    final String stringUrl = 'https://reqres.in/api/users?page=2';
    //sending the request to web and storing the result to a variable. we also have to wait for the results . (asynchronous operation).
    http.Response response = await http.get(
      Uri.parse(stringUrl),
    );
    //we create a variable to the exact type of our output . we want to add our items to this map to use it in the main screen.
    Map<String, dynamic> userdetails = {};
    //here we want to check if our request was successful if so, we continue our operation and if not we throw an error .
    if (response.statusCode == 200) {
      // here we are decoding the data that we got from our request above to a variable of type map.
      Map<String, dynamic> decodedData = jsonDecode(response.body);
      //here we try to iterate through a map .. but im not sure if its correct or not .
      for (var user in decodedData.values) {
        Map<String, dynamic> myusersInfo = {
          'firstName': decodedData['data'][0]['first_name'],
          'lastName': decodedData['data'][0]['last_name'],
          'email': decodedData['data'][0]['email'],
          'id': decodedData['data'][0]['id'].toString(),
          'avatarLink': decodedData['data'][0]['avatar'],
        };
        // here we are trying to add the items to the map specified.
        userdetails.addEntries(myusersInfo.entries);

        return userdetails;
      }
    } else {
      print(response.statusCode);
      throw 'Problem with the get request';
    }
  }
}

這個應用程序的整個目標是練習一些 http 請求。 我在這個應用程序中的最后一個文件。 我剛剛添加了這個，也許它可以幫助你。 提前致謝。

Answer 1

A Column 喜歡擴展直到無窮大。 這可以通過在 Column 周圍放置一個 intrinsicHeight 來解決，如下所示：

此 class 很有用，例如，當高度不受限制並且您希望孩子嘗試無限擴展以將自身調整到更合理的高度時。

IntrinsicHeight(
   child: Column(
      children: [

      ],
   )
);

https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html

Answer 2

嘗試 SingleChildScrollView 中的列