flutterdevicedisplay

Flutter programm aren't displayes part of the code on a real android device


In my flutter projects the body of my showen code works fine in my emulotor, but on a real android device its just a grey screen.

The Listview at the bottom works in a different file fine, so i think the problem isnt the Listview

body: Column(
        children: [
          Container(
            height: MediaQuery.of(context).size.height / 8,
            color: Colors.red,
            child: Expanded( 
              child:Padding( 
              padding: EdgeInsets.all(5),
            child: Row(
              children: [
                Expanded( 
                  child: Padding(
                  padding: EdgeInsets.all(2),
                  child: Column(
                  children: [
                    GestureDetector( 
                      onTap: ()  
                      },
                    child:CircleAvatar(
                      radius: 30,
                      backgroundColor: Colors.blue,
                      backgroundImage: AssetImage("assets/images/Frühstück.jpg" 
                        ),
                        ),
                        Text("Frühstück")
                         ]
                       ),
                    )
                     ),
                  Expanded( 
                  child: Padding(
                  padding: EdgeInsets.all(2),
                  child: Column(
                  children: [
                    GestureDetector(
                      onTap: () {
                        print("111");
                      },
                    child:CircleAvatar(
                      radius: 30,
                      backgroundColor: Colors.blue,
                      backgroundImage: AssetImage("assets/images/Frühstück.jpg"),
                        ),
                         ),
                         Text("Frühstück")
                         ]
                       ),
                    )
                     ),
                    Expanded( 
                  child: Padding(
                  padding: EdgeInsets.all(2),
                  child: Column(
                  children: [
                    GestureDetector(
                      onTap:() {
                        
                      },
                    child:CircleAvatar(
                      
                      radius: 30,
                      backgroundColor: Colors.blue,
                      backgroundImage: AssetImage("assets/images/Frühstück.jpg"),
                        ),
                         ),
                        Text("Frühstück")
                         ]
                       ),
                    )
                     )
                  ],
                )
                 )
                 )
                ),
                Expanded(
                child: ListView.builder(
                itemCount: displayed_meal_list.length,
                itemBuilder: (context, index) => ListTile(
                contentPadding: EdgeInsets.all(10),
                leading: Image(image: AssetImage(displayed_meal_list[index].meal_image!)),
                title: Text(displayed_meal_list[index].meal_title!),
                subtitle: Text("${displayed_meal_list[index].meal_time!} min" ),
                 ) 
              )
              ),

              ],
            ),

Here is what my emulator is showing: enter image description here

Here is what my real device is showing: enter image description here

I appreciate any help.

I have no idea what the problem is about


Solution

  • ... code works fine in my emulator, but on a real Android device it's just a grey screen.

    This is because you have some type of error in Debug mode.

    If you inspect your code logs, you'll see the error:

    Incorrect use of ParentDataWidget.
    

    This is because, in your code, your using Expanded as a child of a Container:

    Column(
              children: [
                Container(
                  // <-- 1. You have a Container here,
                  height: MediaQuery.of(context).size.height / 8,
                  color: Colors.red,
                  child: Expanded(
                    // <-- 2. You have an Expanded widget here, but the
                    // Expanded should be used inside a Row, Column, or Flex.
                    child: Padding(
                      padding: EdgeInsets.all(5),
    

    You'll have to remove the Container if you want to use Expanded.

    See also