Once I have done my screen, it is possible to add a scroll bar?-CodePudding

I inserted cards containing information. However, the number of cards surpasses the normal screen size. The solution is to add a scrollbar. In my code below, where should I add the scrollbar? I can't find the right place. I always get problems related to my writing.

 import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class analgesicos extends StatefulWidget {
  const analgesicos({Key? key}) : super(key: key);

  @override
  State<analgesicos> createState() => _analgesicosState();
}

class _analgesicosState extends State<analgesicos> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,

        appBar: AppBar(

        backgroundColor: Colors.teal,
        centerTitle: true,
        title: Text('Analgésicos',style: TextStyle(
        fontFamily: 'fonts/Quicksand-Light.ttf',
        fontSize: 22,

    ),),
    ),
      body: Container(
                child: (
        Column(crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Padding(padding: const EdgeInsets.only(top: 10, bottom: 10),),
          Container(width: 240.0,
            height: 42.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
              color: const Color(0xffc5fce1),
            ),
            child: SizedBox(
              child: Text(
                'Não-opióides',
                style: TextStyle(
                  fontFamily: 'Quicksand',
                  fontSize: 18,
                  color: Colors.black,
                  height: 1.7,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Divider(
height: 15),

          const Material(
            child: (const Card(
              child: ListTile(
                title: Text('Ácido acetilsalicílico'),
                subtitle: Text('''Apresentação: Comprimidos simples de 500 ou 650 mg
                Indicação: Antipirético e analgésico.
                Posologia odontológica: Uso interno (via oral)
                Tomar 1 comprimido de 6/6 horas.'''),
              ),
            )),
          ),

                    const Material(
            child: (const Card(
              color: Colors.white,
              child: ListTile(
                title: Text('Bula ANVISA'),
              ),
            )),
          ),
          const Material(
            child: (const Card(
              child: ListTile(
                title: Text('Dipirona sódica'),
                subtitle: Text('''Apresentação: Comprimidos simples de 500 e 1000 mg
Indicação: Dores leves ou moderadas, antipirético
Posologia odontológica: Uso interno (via oral)
Tomar 1 comprimido de 4/4 horas, não ultrapassando 4 g diárias..'''),
              ),
            )),
          ),

          const Material(
            child: (const Card(
              color: Colors.white,
              child: ListTile(
                title: Text('Bula ANVISA'),
              ),
            )),
          ),

          const Material(
            child: (const Card(
              color: Colors.white,
              child: ListTile(
                title: Text('Bula ANVISA'),
              ),
            )),
          ),
          const Material(
            child: (const Card(
              child: ListTile(
                title: Text('Dipirona sódica'),
                subtitle: Text('''Apresentação: Comprimidos simples de 500 e 1000 mg
Indicação: Dores leves ou moderadas, antipirético
Posologia odontológica: Uso interno (via oral)
Tomar 1 comprimido de 4/4 horas, não ultrapassando 4 g diárias..'''),
              ),
            )),
          ),

          const Material(
            child: (const Card(
              color: Colors.white,
              child: ListTile(
                title: Text('Bula ANVISA'),
              ),
            )),
          ),

        ],)
        ),

      ),
    );
  }
}

CodePudding user response：

You should wrap the body of your Scaffold() with a SingleChildScrollView() since that's the content of the entire Scaffold().

Complete example:


class analgesicos extends StatefulWidget {
  const analgesicos({Key? key}) : super(key: key);

  @override
  State<analgesicos> createState() => _analgesicosState();
}

class _analgesicosState extends State<analgesicos> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.teal,
        centerTitle: true,
        title: Text(
          'Analgésicos',
          style: TextStyle(
            fontFamily: 'fonts/Quicksand-Light.ttf',
            fontSize: 22,
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          child: (Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 10, bottom: 10),
              ),
              Container(
                width: 240.0,
                height: 42.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.0),
                  color: const Color(0xffc5fce1),
                ),
                child: SizedBox(
                  child: Text(
                    'Não-opióides',
                    style: TextStyle(
                      fontFamily: 'Quicksand',
                      fontSize: 18,
                      color: Colors.black,
                      height: 1.7,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              Divider(height: 15),
              const Material(
                child: (const Card(
                  child: ListTile(
                    title: Text('Ácido acetilsalicílico'),
                    subtitle: Text(
                        '''Apresentação: Comprimidos simples de 500 ou 650 mg
                  Indicação: Antipirético e analgésico.
                  Posologia odontológica: Uso interno (via oral)
                  Tomar 1 comprimido de 6/6 horas.'''),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  color: Colors.white,
                  child: ListTile(
                    title: Text('Bula ANVISA'),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  child: ListTile(
                    title: Text('Dipirona sódica'),
                    subtitle: Text(
                        '''Apresentação: Comprimidos simples de 500 e 1000 mg
Indicação: Dores leves ou moderadas, antipirético
Posologia odontológica: Uso interno (via oral)
Tomar 1 comprimido de 4/4 horas, não ultrapassando 4 g diárias..'''),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  color: Colors.white,
                  child: ListTile(
                    title: Text('Bula ANVISA'),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  color: Colors.white,
                  child: ListTile(
                    title: Text('Bula ANVISA'),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  child: ListTile(
                    title: Text('Dipirona sódica'),
                    subtitle: Text(
                        '''Apresentação: Comprimidos simples de 500 e 1000 mg
Indicação: Dores leves ou moderadas, antipirético
Posologia odontológica: Uso interno (via oral)
Tomar 1 comprimido de 4/4 horas, não ultrapassando 4 g diárias..'''),
                  ),
                )),
              ),
              const Material(
                child: (const Card(
                  color: Colors.white,
                  child: ListTile(
                    title: Text('Bula ANVISA'),
                  ),
                )),
              ),
            ],
          )),
        ),
      ),
    );
  }
}

Side note:

The convention is to name classes in TitleCase, so your class should be named Analgesicos with a capital A.

CodePudding user response：

If you want to have a Scrollbar visible do as follows:

body: Scrollbar(
  child: SingleChildScrollView(
    child: Container( ... all your existing stuff ...),
  ),
),

If you don't want the Scrollbar visible, just add the SingleChildScrollView to make the list scrollable.

body: SingleChildScrollView(
    child: Container( ... all your existing stuff ...),
),