Need help displaying a string on the app UI. (Flutter)-CodePudding

I am a complete beginner in Flutter. I want to display a question/ container under the app bar. So far i have written the code, but my code doesn't change anything on the app. The answer is probably something super basic, which i am missing. Your help is greatly appreciated. This is my code so far.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyAppBarWidget(),
      theme: ThemeData(brightness: Brightness.dark),
    );
  }
}

class MyAppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
      actions: <Widget>[
        IconButton(
          icon: const Icon(Icons.navigate_before),
          onPressed: null,
        )
      ],
    ));
  }
}
class Frage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.all(10),
        child: Center(
          child: Text(
            'question',
            style: TextStyle(fontSize: 21, color: Colors.white),
            textAlign: TextAlign.center,
          ),
        ));
  }
}

CodePudding user response：

Please replace this class

class MyAppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.navigate_before),
            onPressed: null,
          )
        ],
      ),
      body: Frage(),
    );
  }
}

CodePudding user response：

Add your Frage() class to body.

class MyAppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.navigate_before),
            onPressed: null,
          )
        ],
      ),
      body: Frage(),
    );
  }
}

Result Screen->

CodePudding user response：

As Daniel Roldan has answered you missed adding the body to the scaffold. I've updated your code to work

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyAppBarWidget(),
      theme: ThemeData(brightness: Brightness.dark),
    );
  }
}

class MyAppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.navigate_before),
            onPressed: null,
          )
        ],
      ),
      body: Frage(), //You just missed out on the body
    );
  }
}

class Frage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.all(10),
        child: Center(
          child: Text(
            'question',
            style: TextStyle(fontSize: 21, color: Colors.white),
            textAlign: TextAlign.center,
          ),
        ));
  }
}

CodePudding user response：

you need to put body: Frage() inside of your scaffold, you havent call the Frage so it wont show anything

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyAppBarWidget(),
      theme: ThemeData(brightness: Brightness.dark),
    );
  }
}

class MyAppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          actions: const <Widget>[
            IconButton(
              icon: Icon(Icons.navigate_before),
              onPressed: null,
            )
          ],
        ),
        body: Frage());
  }
}

class Frage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: const EdgeInsets.all(10),
        child: const Center(
          child: Text(
            'question',
            style: TextStyle(fontSize: 21, color: Colors.white),
            textAlign: TextAlign.center,
          ),
        ));
  }
}

you still can put the Frage in another file and call it. the code will be more clean. and you can wrap the Frage inside of Column if you want to show more something like this

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyAppBarWidget(),
      theme: ThemeData(brightness: Brightness.dark),
    );
  }
}

class MyAppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          actions: const <Widget>[
            IconButton(
              icon: Icon(Icons.navigate_before),
              onPressed: null,
            )
          ],
        ),
        body: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Frage(),
              const Text('1. Hello World :)'),
              const Text('2. Hello World :)'),
              const Text('3. Hello World :)'),
            ],
          ),
        ));
  }
}

class Frage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: const EdgeInsets.all(10),
        child: const Text(
          'question',
          style: TextStyle(fontSize: 21, color: Colors.white),
          textAlign: TextAlign.center,
        ));
  }
}

CodePudding user response：

To fix this, add body: parameter to your Scaffold widget under MyAppBarWidget() class. You could go something like

Scaffold(
        appBar: AppBar(
      actions: <Widget>[
        IconButton(
          icon: const Icon(Icons.navigate_before),
          onPressed: null,
        )
      ],
    ),
  body : Frage(),
);