Search code examples
listviewflutterflutter-layoutbuilderflutter-test

Screen disappear after wrapping the widget with column/Row widget


When I'm trying to wrap the main_screen.dart scaffold body argument to the column/Row widget But only the App Bar Title is showing. Not the Body argument of the Scaffold. I want to add the some other widget in the column/Row view this is why it is essential for me. Please describe how to resolve this issue. I tried wrapping it with container then column/Row but nothing works.

main.dart

import 'package:app/main_screen.dart';
import 'package:flutter/material.dart';
main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Receipe App',
      home: MainScreen(),

    );
  }
}

main_screen.dart

    import 'package:app/detail_page.dart';
import 'package:flutter/material.dart';
import 'dummy.dart';
import 'popular_item.dart';

class MainScreen extends StatelessWidget {
  final dummyData = DUMMY_MEALS
      .map((meData) => PopularItem(meData.title, meData.id, meData.imgUrl))
      .toList();
  void selectMeal(BuildContext ctx) {
    Navigator.of(ctx).push(
      MaterialPageRoute(
        builder: (_) {
          return DetailPage();
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hey Designer'),
      ),
      body: Row(
        children: <Widget>[
          DetailPage(),
        ],
      )


    );
  }
}

detail_page.dart

import 'package:flutter/material.dart';
// import 'package:app/detail_page.dart';
// import 'package:flutter/material.dart';
import 'dummy.dart';
import 'popular_item.dart';

class DetailPage extends StatelessWidget {
   final dummyData = DUMMY_MEALS
      .map((meData) => PopularItem(meData.title, meData.id, meData.imgUrl))
      .toList();
  void selectMeal(BuildContext ctx) {
    Navigator.of(ctx).push(
      MaterialPageRoute(
        builder: (_) {
          return DetailPage();
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return  ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: dummyData.length,
    itemBuilder: (ctx, index) {
      return Stack(
        children: <Widget>[
          InkWell(
            onTap: ()=>selectMeal(context),
                          child: Container(
              height: 210,
              width: 200,
              margin: EdgeInsets.all(15),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(10),
                  topRight: Radius.circular(10),
                ),
                gradient: LinearGradient(
                    colors: [Colors.white, Color(0xFFACBEA3)],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight),
                boxShadow: [
                  BoxShadow(
                      color: Colors.black87,
                      blurRadius: 10.0,
                      spreadRadius: 0.5,
                      offset: Offset.fromDirection(20)),
                ],
              ),
              child: Container(
                margin: EdgeInsets.only(
                    bottom: 45, top: 20, left: 20, right: 20),
                // margin: EdgeInsets.only(bottom: 40, top: 5),
                // color: Colors.red,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(
                    image: AssetImage('images/plate1.png'),
                    fit: BoxFit.cover,
                  ),
                  color: Colors.green,
                ),
              ),
            ),
          ),
          Positioned(
            top: 190,
            left: 12,
            height: 40,
            child: Container(
              child: Text(dummyData[index].title),
              width: 200,
              margin: EdgeInsets.only(left: 3),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                borderRadius: new BorderRadius.only(
                  bottomLeft: Radius.circular(10),
                  bottomRight: Radius.circular(10),
                ),
                color: Colors.white,
                // boxShadow: [
                //   BoxShadow(
                //       color: Colors.black87,
                //       blurRadius: 10.0,
                //       spreadRadius: 0.5,
                //       offset: Offset.fromDirection(60)),
                // ],
              ),
            ),
          )
        ],
      );
    });
  }
}

popular_item.dart

import 'package:flutter/material.dart';

class PopularItem extends StatelessWidget {
  final String title;
  final String id;
  final String imgUrl;
  PopularItem(this.title, this.id,this.imgUrl);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(25),
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[

          Text(title),
          Text(id),
        ],
      ),
    );
  }
}

dummy.dart

import 'popular.dart';

const DUMMY_MEALS = const [
  Popular(
    id: 'm1',

    title: 'Spaghetti with Tomato Sauce',
    imgUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/800px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',

  ),
  Popular(
    id: 'm1',

    title: 'Spaghetti ',
    imgUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/800px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',

  ),
  Popular(
    id: 'm1',

    title: 'Spaghetti with Tomato Sauce',
    imgUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/800px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',

  ),
  Popular(
    id: 'm1',

    title: 'Spaghetti with Tomato Sauce',
    imgUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/800px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',

  ),


];

popular.dart

class Popular{
 final String id;
 final String title;
 final String imgUrl;
 const Popular(
{
  this.id,
   this.imgUrl,
  this.title
}
 );
}

Solution

  • your description still not clear but according to your code i have made some changes where the error occurred, just replace this code

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Material(
          child: MaterialApp(
          title: 'Receipe App',
          home: MainScreen(),
        ),
        );
      }
    }
    

    you might get the desired output.

    let me know if it works.

    // update code

     @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Hey Designer'),
          ),
          body:Column(
            children: <Widget>[
               Row(
            children: <Widget>[
             Container(
               width: MediaQuery.of(context).size.width*0.98,
               height: 300,
               child: DetailPage(),
             ),
    
            ],
          ),
          Text('Hello')
            ],
          )
    
    
        );
      }
    

    check out the updated code that i have added add it in the main screens build method. let me know if it works,