xgqfrms/index.html

## index.html
<h1>Flutter in DartPad live app</h1>

<div>
  <canvas id="canvas" width="300" height="300"></canvas>
</div>


## main.dart
// dart
// CanvasElement canvas = querySelector("#canvas");

import 'package:flutter/material.dart';

import './state-app.dart';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // debugShowCheckedModeBanner: false,// prod
      debugShowCheckedModeBanner: true,// prod
      // theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      theme: ThemeData(
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
        backgroundColor: Colors.grey,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("appbar"),
          backgroundColor: Colors.blueAccent[700],
        ),
        body: Center(
          child: StateApp(),
          // child: MyWidget(),
//           child: Image(
//             image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')
//           ),
        ),
      ),
    );
  }
}


class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4);
  }
}

## state-app.dart
import 'package:flutter/material.dart';
// import 'package:flutter_speed_dial/flutter_speed_dial.dart';

// void main() => runApp(App());

// class App extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       // home: StateApp(),
//       home: Scaffold(
//         appBar: AppBar(
//           title: Text("appbar"),
//           backgroundColor: Colors.blueAccent[700],
//         ),
//         body: Center(
//           child: StateApp(),
//         ),
//       ),
//     );
//   }
// }

class StateApp extends StatefulWidget {
  StateApp();
  @override
  createState() => _StateAppState();
}

class _StateAppState extends State<StateApp> {
  int _counter = 0;
  // String _randomColor = "#ff00ff";
  Color _randomColor = Colors.lightGreen;
  void _clearCounter() => setState(() {
    // clear
    _counter = 0;
    _randomColor = Colors.lightGreen;
  });
  void _updateCounter() => setState(() {
    _counter++;
    _randomColor = (_counter % 2 == 0) ? Colors.redAccent : Colors.purple;
    // random color
  });
  // _updateCounter() {
  //   setState(() {
  //     _counter++;
  //   });
  // }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.lightGreen,
      backgroundColor:  _randomColor,
      body: Center(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(23.0),
              child: Text(
                'You have pushed the button this many times:',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,
                ),
              ),
            ),
            Center(
              child: Text(
                '$_counter',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 23.0,
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: Padding(
        // padding: const EdgeInsets.all(8.0),
        padding: const EdgeInsets.only(
          top: 300.0,
        ),
        child: Column(
          children: <Widget>[
            // SpeedDial
            FloatingActionButton(
              onPressed: () async {
                // _counter++;
                // setState(() {
                //   _counter++;
                // });
                _updateCounter();
                print("clicked = $_counter");
              },
              child: Icon(Icons.add),
              // heroTag: null,
              heroTag: 0,
            ),
            FloatingActionButton(
              onPressed: () async {
                _clearCounter();
                print("clear = $_counter");
              },
              child: Icon(Icons.remove),
              heroTag: 'unique id',
              // heroTag: 1,
            ),
          ],
        ),
      ),
    );
  }
}

## styles.css
@charset "UTf-8";

/* styles.css */

:root {
  --color: #000;
  --default-color: green;
  --new-color: #0f0;
}

html{
  /* font-size: 62.5%; */
  /* 10px = 1rem */
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, object, code, legend, button, input, textarea, th, td, a, img, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
	<h1>Flutter in DartPad live app</h1>

	<div>
	<canvas id="canvas" width="300" height="300"></canvas>
	</div>
	// dart
	// CanvasElement canvas = querySelector("#canvas");

	import 'package:flutter/material.dart';

	import './state-app.dart';

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

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

	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Flutter Demo',
	// debugShowCheckedModeBanner: false,// prod
	debugShowCheckedModeBanner: true,// prod
	// theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
	theme: ThemeData(
	primarySwatch: Colors.blue,
	// This makes the visual density adapt to the platform that you run
	// the app on. For desktop platforms, the controls will be smaller and
	// closer together (more dense) than on mobile platforms.
	visualDensity: VisualDensity.adaptivePlatformDensity,
	backgroundColor: Colors.grey,
	),
	home: Scaffold(
	appBar: AppBar(
	title: Text("appbar"),
	backgroundColor: Colors.blueAccent[700],
	),
	body: Center(
	child: StateApp(),
	// child: MyWidget(),
	// child: Image(
	// image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')
	// ),
	),
	),
	);
	}
	}


	class MyWidget extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Text('Hello, World!', style: Theme.of(context).textTheme.headline4);
	}
	}
	import 'package:flutter/material.dart';
	// import 'package:flutter_speed_dial/flutter_speed_dial.dart';

	// void main() => runApp(App());

	// class App extends StatelessWidget {
	// @override
	// Widget build(BuildContext context) {
	// return MaterialApp(
	// // home: StateApp(),
	// home: Scaffold(
	// appBar: AppBar(
	// title: Text("appbar"),
	// backgroundColor: Colors.blueAccent[700],
	// ),
	// body: Center(
	// child: StateApp(),
	// ),
	// ),
	// );
	// }
	// }

	class StateApp extends StatefulWidget {
	StateApp();
	@override
	createState() => _StateAppState();
	}

	class _StateAppState extends State<StateApp> {
	int _counter = 0;
	// String _randomColor = "#ff00ff";
	Color _randomColor = Colors.lightGreen;
	void _clearCounter() => setState(() {
	// clear
	_counter = 0;
	_randomColor = Colors.lightGreen;
	});
	void _updateCounter() => setState(() {
	_counter++;
	_randomColor = (_counter % 2 == 0) ? Colors.redAccent : Colors.purple;
	// random color
	});
	// _updateCounter() {
	// setState(() {
	// _counter++;
	// });
	// }

	@override
	Widget build(BuildContext context) {
	return Scaffold(
	// backgroundColor: Colors.lightGreen,
	backgroundColor: _randomColor,
	body: Center(
	child: Column(
	children: <Widget>[
	Padding(
	padding: const EdgeInsets.all(23.0),
	child: Text(
	'You have pushed the button this many times:',
	style: TextStyle(
	fontWeight: FontWeight.bold,
	fontSize: 18.0,
	),
	),
	),
	Center(
	child: Text(
	'$_counter',
	style: TextStyle(
	fontWeight: FontWeight.bold,
	fontSize: 23.0,
	),
	),
	),
	],
	),
	),
	floatingActionButton: Padding(
	// padding: const EdgeInsets.all(8.0),
	padding: const EdgeInsets.only(
	top: 300.0,
	),
	child: Column(
	children: <Widget>[
	// SpeedDial
	FloatingActionButton(
	onPressed: () async {
	// _counter++;
	// setState(() {
	// _counter++;
	// });
	_updateCounter();
	print("clicked = $_counter");
	},
	child: Icon(Icons.add),
	// heroTag: null,
	heroTag: 0,
	),
	FloatingActionButton(
	onPressed: () async {
	_clearCounter();
	print("clear = $_counter");
	},
	child: Icon(Icons.remove),
	heroTag: 'unique id',
	// heroTag: 1,
	),
	],
	),
	),
	);
	}
	}
	@charset "UTf-8";

	/* styles.css */

	:root {
	--color: #000;
	--default-color: green;
	--new-color: #0f0;
	}

	html{
	/* font-size: 62.5%; */
	/* 10px = 1rem */
	}

	* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	html, body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, object, code, legend, button, input, textarea, th, td, a, img, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	}