Add button on the screen without using MaterialApp Flutter

Question

I'm trying to make simple example that has a clickable button in center of screen in Flutter. I can do that using MaterialApp widget but I want to do it without using MaterialApp.

This example works with Text widget

import 'package:flutter/material.dart';

void main() {
  runApp(
      Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  ) ;
}

But all my trials to change the Text widget with FlatButton or RaisedButton failed because they depend on Material Widget

I also tried that:

import 'package:flutter/material.dart';

void main() {
  runApp(
      Container(
          decoration: BoxDecoration(color: Colors.white),
          child:Center(
      child: RaisedButton(
            child: const Text('Press meh', textDirection: TextDirection.ltr),
            onPressed: () {
            },
          ),
          )
      )
  );
}

Question is: Is there any way to have Button that does not depend on Material Widget?

Answer 1

You have to use - WidgetsApp then.

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

class SomeText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      builder: (context, int) {
        return Center(
          child: RaisedButton(
            onPressed: () {},
            child: Text(
              'Hello, world!',
              textDirection: TextDirection.ltr,
            ),
          ),
        );
      },
      color: Colors.blue,
    );
  }
}

As per Doc -

WidgetsApp, which defines the basic app elements but does not depend on the material library.

Update - Without Other Class:

If you use home: then you need to pass - onGenerateRoute or pageRouteBuilder

If neither builder nor onGenerateRoute are provided, the pageRouteBuilder must be specified so that the default handler will know what kind of PageRoute transition to build.

void main() {
  runApp(WidgetsApp(
    builder: (context, int) {
      return Center(
        child: RaisedButton(
          onPressed: () {},
          child: Text(
            'Hello, world!',
            textDirection: TextDirection.ltr,
          ),
        ),
      );
    },
    color: Colors.blue,
  ));
}