json_text_field 1.1.0

Flutter widget that automatically formats text in a JSON format.

example/lib/main.dart

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final controller = JsonTextFieldController();
  bool isFormating = true;

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: Scaffold(
          appBar: AppBar(
              title: const Center(child: Text('JSON Text Field Example'))),
          body: Center(
            child: Column(
              children: [
                const SizedBox(height: 50),
                SizedBox(
                  width: 300,
                  height: 300,
                  child: JsonTextField(
                    onError: (error) => debugPrint(error),
                    showErrorMessage: true,
                    controller: controller,
                    isFormatting: isFormating,
                    keyboardType: TextInputType.multiline,
                    expands: true,
                    maxLines: null,
                    textAlignVertical: TextAlignVertical.top,
                    onChanged: (value) {},
                    decoration: InputDecoration(
                      hintText: "Enter JSON",
                      hintStyle: TextStyle(
                        color:
                            Theme.of(context).colorScheme.outline.withOpacity(
                                  0.6,
                                ),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius:
                            const BorderRadius.all(Radius.circular(8)),
                        borderSide: BorderSide(
                          color:
                              Theme.of(context).colorScheme.primary.withOpacity(
                                    0.6,
                                  ),
                        ),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderRadius:
                            const BorderRadius.all(Radius.circular(8)),
                        borderSide: BorderSide(
                          color: Theme.of(context).colorScheme.surfaceVariant,
                        ),
                      ),
                      filled: true,
                    ),
                  ),
                ),
                ElevatedButton(
                    onPressed: () => controller.formatJson(sortJson: false),
                    child: const Text('Format JSON')),
                ElevatedButton(
                    onPressed: () => controller.formatJson(sortJson: true),
                    child: const Text('Format JSON (sort)')),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Text('Format as JSON'),
                    Switch(
                        value: isFormating,
                        onChanged: (value) =>
                            setState(() => isFormating = value)),
                  ],
                ),
              ],
            ),
          ),
        ));
  }
}