Search code examples
fluttercomputer-visionflutter-layoutmorse-code

Aligning elements in Flutter isn't working


I wrote a code which uses flutter_mobile_vision and morse to scan texts via mobile camera and covert those scanned texts into Morse code.
Here is my code:

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobile_vision/flutter_mobile_vision.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:lottie/lottie.dart';
import 'package:morse/morse.dart';

class OCRPage extends StatefulWidget {
  @override
  _OCRPageState createState() => _OCRPageState();
}

class _OCRPageState extends State<OCRPage> {

  int _ocrCamera = FlutterMobileVision.CAMERA_BACK;
  String _text = "TEXT";

  Future<Null> _read() async {
    List<OcrText> texts = [];
    try {
      texts = await FlutterMobileVision.read(
        camera: _ocrCamera,
        waitTap: true,
      );

      setState(() {
        _text = texts[0].value;
      });
    } on Exception {
      texts.add( OcrText('Failed to recognize text'));
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return SingleChildScrollView(
      child: Center(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Lottie.asset('assets/scan-some-words.json', repeat: false),
          SizedBox(height: 20),
          Text(_text, style: GoogleFonts.orbitron(textStyle: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.w500)), textAlign: TextAlign.center,),
          SizedBox(height: 10),
          Text(Morse(_text).encode(), style: GoogleFonts.orbitron(textStyle: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.w500)),textAlign: TextAlign.center,),
          SizedBox(height: 30),
          ElevatedButton(
            onPressed: _read,
            child: new Text('Start Scanning'),
            // color: Color(0xFFFF16CD),
            // splashColor: Colors.orangeAccent,
          ),
          SizedBox(height: 10),
          Text('Tap on the text to convert into Morse Code', style: TextStyle(color: Color(0xffE6BBFC)),)
        ]

      )
    );


    throw UnimplementedError();
  }
}    

I'm referring this link for aligning widgets: https://flutter.dev/docs/development/ui/layout#aligning-widgets
I'm trying to align the child elements as children: <Widget>[]. But I get error as

The named parameter 'mainAxisAlignment' isn't defined. (Documentation) Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'mainAxisAlignment'.
The named parameter 'children' isn't defined. (Documentation) Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'children'.

What did I miss here?


Solution

  • mainAxisAlignment property is How the children should be placed along the main axis in a flex layout. A Center widget doesn't have mainAxisAlignment property since it is not flex layout.

    Here you can can use Column widget.