Demo

class TiltExample extends StatefulWidget {
  const TiltExample({super.key});

  @override
  State<TiltExample> createState() => _TiltExampleState();
}

class _TiltExampleState extends State<TiltExample> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.brown),
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.brown,
          titleTextStyle: TextStyle(color: Colors.white),
        ),
      ),
      child: Tilt(
        tiltConfig: const TiltConfig(angle: 15),
        child: TiltBaseContainer(
          lightConfig: const LightConfig(minIntensity: 0.1),
          shadowConfig: const ShadowBaseConfig(
            minIntensity: 0.05,
            maxIntensity: 0.4,
            offsetFactor: 0.08,
            minBlurRadius: 10,
            maxBlurRadius: 15,
          ),
          borderRadius: BorderRadius.circular(24),
          childLayout: ChildLayout(
            outer: [
              Positioned(
                top: 200,
                child: TiltParallax(
                  offset: const Offset(-20, -20),
                  child: Text('$_counter', style: const TextStyle(fontSize: 20)),
                ),
              ),
              Positioned(
                bottom: 10,
                right: 10,
                child: TiltParallax(
                  offset: const Offset(25, 25),
                  child: SizedBox(
                    width: 48,
                    height: 48,
                    child: FloatingActionButton(
                      onPressed: _incrementCounter,
                      tooltip: 'Increment',
                      elevation: 0.0,
                      child: const Icon(Icons.add),
                    ),
                  ),
                ),
              ),
            ],
          ),
          child: const MyHomePage(title: 'Flutter Tilt Demo'),
        ),
      ),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 250,
      height: 450,
      child: Scaffold(
        primary: false,
        backgroundColor: const Color(0x206D6E6F),
        appBar: AppBar(
          primary: false,
          title: Text(widget.title, style: const TextStyle(fontSize: 18)),
        ),
        body: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('You have pushed the button this many times', style: TextStyle(fontSize: 10)),
            ],
          ),
        ),
      ),
    );
  }
}