user15387615
user15387615

Reputation: 11

How to position an image in relation to the center?

For my school I make a compass.

So I have that on my phone:

enter image description here

The problem is a align center for the position. And I want to make the sensor (the blue bubble). So for that I want to move the images with the center position minus the information sensor so for example if information is x = -6 :

enter image description here

This is my code:

import ...

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

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _hasPermissions = false;
  CompassEvent? _lastRead;

  //information for the sensor (x,y,z)
  List<double>? _gyroscopeValues;
  List<StreamSubscription<dynamic>> _streamSubscriptions =
  <StreamSubscription<dynamic>>[];

  @override
  void initState() {
    super.initState();

    _streamSubscriptions.add(gyroscopeEvents.listen((GyroscopeEvent event) {
      setState(() {
        _gyroscopeValues = <double>[event.x, event.y, event.z];
      });
    }));
    _fetchPermissionStatus();
  }

  @override
  Widget build(BuildContext context) {
    double heightMobil = 500;
    double widthMobil = 500;
    final List<String>? gyroscope =
    _gyroscopeValues?.map((double v) => v.toStringAsFixed(1)).toList();
    return MaterialApp(

      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text('Boussole - COSTIOU Rozenn'),
        ),
        body: Builder(builder: (context) {
          if (_hasPermissions) {
            return Column(
              children: <Widget>[
                _buildCompass(),
                Padding(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Gyroscope: $gyroscope'),
                    ],
                  ),
                  padding: const EdgeInsets.all(16.0),
                ),
              ],
            );
          } else {
            return _buildPermissionSheet();
          }
        }),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    for (StreamSubscription<dynamic> subscription in _streamSubscriptions) {
      subscription.cancel();
    }
  }

  Widget _buildCompass() {
    return StreamBuilder<CompassEvent>(
      stream: FlutterCompass.events,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('Error reading heading: ${snapshot.error}');
        }
        double? direction = snapshot.data!.heading;

        // if direction is null, then device does not support this sensor
        // show error message
        if (direction == null)
           // not information

        return  Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Image(
                width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.width,
                image: AssetImage("assets/images/graduation.jpg"),
                fit: BoxFit.contain,
              ),

              Transform.rotate(
                angle: (direction * (math.pi / 180) * -1) ,
                child: Image(
                  width: MediaQuery.of(context).size.width /1.3, height: MediaQuery.of(context).size.width /1.3,
                  image: AssetImage("assets/images/boussole.png"),
                ),
              ),
              Stack(
                  children: <Widget>[
                    Positioned(
                      child: Image(
                        width: MediaQuery.of(context).size.width /8, height: MediaQuery.of(context).size.width /8,
                        image: AssetImage("assets/images/gyroscope.png"),
                      )
                    ),
                  ]
              ),

            ]

        );
      },
    );
  }

  Widget _buildPermissionSheet() {
    //access management to the telephone setting
  }

  void _fetchPermissionStatus() {
    //access management to the telephone setting
  }
} 

Sorry for my English if you want more information you cans ask me

Thanks for your answer

Upvotes: 1

Views: 72

Answers (0)

Related Questions