Home > Back-end >  In Flutter, why Scaffold's body can't directly use Row()?
In Flutter, why Scaffold's body can't directly use Row()?

Time:11-30

If I use Row() instead of Center(), it will not be displayed,just blank.

I expect a music player like layout. Make 2 Row, the 1st Row contain "LeftMenu" and "Expanded Container" for content .

CodePudding user response:

Putting this in scaffold gives you the left menu:

drawer: const Drawer(
          child: Text("Left Menu")
      ),

Putting this inside scaffold body works. Expanded and a row:

 Column(
          children: [

            Expanded(
                child: Container(
                  color: Colors.green,
                  child: const Center(child: Text("1")),
                )
            ),

            Row(
              children: const [
                Text("1"),
                SizedBox(width: 10),
                Text("2"),
              ],
            ),
          ],
        )

CodePudding user response:

If you replace center with row, it probably displays but in the top left corner and not middle. Try to wrap your Row with Center and it should display in the middle. For the row you need to add a mainAxisAlignment.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center (child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children:[ Text('Left menu'),Text('Place container here')]
        ),),
      ),
    );
  }
}
  • Related