Question 392474 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – App bar messed up center title and scrolling doesn't work

I made this page and I don’t know how to make the title ‘ Workout Program ‘ in the middle and as you can see at the end of the page it’s a problem because I don’t know where I should add a scroll view or what else to add to make it scrollable
this is the code. I tried to wrap all column in the beginning in a ScrollView but nothing changed

class WorkoutPage extends StatefulWidget {
  @override
  WorkoutPageState createState() => WorkoutPageState();
}

class WorkoutPageState extends State<WorkoutPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.white,
          actions: [
            Align(
              alignment: Alignment.topCenter,
              child: Text(
                'WORKOUT PROGRAME',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
            ),
          ],
        ),
        body: Padding(
            padding: EdgeInsets.only(top: 60, left: 20, right: 20),
            child: Align(
              alignment: Alignment.center,
              child: Column(children: [
                SizedBox(
                  height: 10,
                ),
                Text(
                  'Name of workout programe',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                SizedBox(
                  height: 10,
                ),
                Container(
                  height: 250,
                  width: 420,
                  decoration: new BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                    image: new DecorationImage(
                      image: new AssetImage('assets/coverphoto.png'),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                FilledButton(
                  child: Text(
                    'BUY FOR 0.00',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  onPressed: () {},
                  style: ButtonStyle(
                    backgroundColor: MaterialStatePropertyAll(
                      Colors.black,
                    ),
                    foregroundColor: MaterialStatePropertyAll(
                      Colors.white,
                    ),
                  ),
                ),
                SizedBox(
                  height: 5,
                ),
                WorkoutPPostDetail(),
                WorkoutPPostDetail(),
                _pause(context)
              ]),
            )));
  }
}

_pause(context) {
  return Padding(
    padding: const EdgeInsets.all(10.0),
    child: Container(
      height: 135,
      width: MediaQuery.of(context).size.width * 0.90,
      decoration: ShapeDecoration(
        shape: RoundedRectangleBorder(
            borderRadius: new BorderRadius.all(new Radius.circular(10))),
        color: Colors.white,
        shadows: [
          BoxShadow(
            color: Colors.grey.shade400,
            blurRadius: 5,
            spreadRadius: 2,
          ),
        ],
      ),
      child: Center(
          child: Text('DAY NR| PAUSE',
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 30,
                  color: const Color.fromARGB(255, 207, 207, 207)))),
    ),
  );
}

And this is the outcome of the code

Outcome of the code

Tags:

2

Answers


  1. 0

    try:

    class WorkoutPage extends StatefulWidget {
  const WorkoutPage({super.key});

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

class WorkoutPageState extends State<WorkoutPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.white,
          //put your text inside the title instead of actions, 
          title: Text(
            'WORKOUT PROGRAME',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
          ),
        ),
...

    result:

    enter image description here

    Login or Signup to reply.
  2. 0

    You can center app bar’s title as following:

    appBar: AppBar(
  title: Text('WORKOUT PROGRAME'),
  centerTitle: true, // align the title to the center of the appbar
 )

    make sure that centerTitle property is true.

    and for the bottom overflow, you can wrap the body by a scroll view:

    SingleChildScrollView(
 child: Column(
  children:[
   ...
   ]
  )
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search