Wednesday, July 5, 2023

flutter background Image.asset, pass stateObject to custom widget by setState, Stack is framelayout

 main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'pages/my_home_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        statusBarColor: Colors.orange,
      ),
    );
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: [] //[SystemUiOverlay.top], is statusBar
        );
    return MaterialApp(
      debugShowCheckedModeBanner: false, // remove a DEBUG banner
      title: 'Devil Hunter',
      theme: ThemeData(
        // colorScheme: ColorScheme.fromSeed(
        //   seedColor: Colors.grey,
        //   primary: Colors.orange,
        //   secondary: Colors.green,
        // ),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Devil Hunter - Chotgor'),
      routes: {
        'home-page': (context) => const MyHomePage(title: 'aaaaaa'),
      },
    );
  }
}

customWidget.dart

import 'package:flutter/material.dart';
import 'package:game1chotgor/pages/my_home_page.dart';

class MyLoginWidget extends StatefulWidget {
  final RuntimeStateObject stateObject;

  const MyLoginWidget({Key? key, required this.stateObject}) : super(key: key);

  @override
  State<MyLoginWidget> createState() => MyLoginWidgetState();
}

class MyLoginWidgetState extends State<MyLoginWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  String get stateCounter => '\$${widget.stateObject.counter}';
  int get stateCounterIf =>
      (widget.stateObject.counter < 10 ? 10 : widget.stateObject.counter);
  double get stateFont => stateCounterIf.toDouble();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      alignment: Alignment.bottomCenter,
      child: Container(
        color: Colors.amber,
        padding: const EdgeInsets.all(15),
        margin: const EdgeInsets.symmetric(vertical: 100, horizontal: 15),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
              child: Container(
                color: Colors.red,
                child: const Text(
                  'This is a very long text that won\'t fit the line.',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
            Container(
              color: Colors.green,
              child: Text(
                stateCounter,
                style: TextStyle(fontSize: stateFont),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

backgroundWidget.dart

import 'package:flutter/material.dart';

class MyBackgroundWidget extends StatelessWidget {
  final String assetImageUrl;

  const MyBackgroundWidget({
    Key? key,
    this.assetImageUrl = 'images/background.jpg',
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      width: double.infinity,
      margin: const EdgeInsets.all(0),
      padding: const EdgeInsets.all(0),
      child: Image.asset(
        assetImageUrl,
        fit: BoxFit.cover,
      ),
    );
  }
}

homePage.dart

import 'package:flutter/material.dart';

import '../widgets/my_background_widget.dart';
import '../widgets/my_login_widget.dart';

class RuntimeStateObject {
  int counter = 0;
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final RuntimeStateObject _stateObject = RuntimeStateObject();

  void _incrementCounter() {
    setState(() {
      _stateObject.counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // setState дуудагдах бүрт энэ аргыг дахин ажиллуулдаг
    return Scaffold(
      //   appBar: AppBar(
      //     systemOverlayStyle: const SystemUiOverlayStyle(
      //       statusBarColor: Colors.orangeAccent,
      //     ),
      //     backgroundColor: Theme.of(context).colorScheme.primary,
      //     title: Text(widget.title),
      //     //   leading: Image(image: NetworkImage()),
      //     elevation: 0,
      //     toolbarHeight: 0,
      //   ),
      backgroundColor: Colors.black87,
      body: Center(
        child: Stack(
          children: <Widget>[
            const MyBackgroundWidget(
              assetImageUrl: 'images/background.jpg',
            ),
            // MyHomeLogoWidget(),
            MyLoginWidget(
              stateObject: _stateObject,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}