简体   繁体   中英

Flutter: I want to display "Grid View" and other widgets together on the screen

I was able to display the child widgets in a grid using the GridView widget, Widgets such as text and GridView widgets together on one screen How can I display it?

For example

//sign_in_page.dart

class SignInPage extends StatelessWidget {

  void _signInAnonymously() async {
    final authResult=await FirebaseAuth.instance.signInAnonymously();

    print('${authResult.user.uid}');

  }

  @override
  Widget build(BuildContext context) {

    List<Widget> list1=[
      SizedBox(
        width:50.0,
        height:50.0,
        child:Container(
          color:Colors.blue,
        ),
      ),
      SizedBox(
        width:100.0,
        height:100.0,
        child:Container(
          color:Colors.red,
        ),
      ),
      SizedBox(
        width:100.0,
        height:100.0,
        child:Container(
          color:Colors.green,
        ),
      ),
      SizedBox(
        width:100.0,
        height:100.0,
        child:Container(
          color:Colors.yellow,
        ),
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('title'),
        elevation: 10.0,
      ),
      //body: buildContent(),
      body:Column(    //←This will give an error.
        children: [
          Text('Description of this GridView'),
          GridView.count(
              crossAxisCount: 3,
              children: list1
          ),
        ],
      ),
      backgroundColor: Colors.grey[300],
    );
  }
//main.dart

import 'package:flutter/material.dart';

import 'app/sign_in/sign_in_page.dart';
void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'title',
      theme:ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home:SignInPage(),
    );
  }
}

I want to display the text and grid view,

but when I try to display it using the Column widget as above,

I get an error.

Is there any suitable widget to use in this situation?

I guess You should wrap Your GridView.count() with an Expanded() to specify the height, like

Expanded(
 child: GridView.count()
)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM