I have problem with widget

when i click button other widget keep moving

look when I click change name other widget keep moving

also when i keep click in plus button other widget keep moving

i am try everything i try add widget with Fitbox and i try add widget in continer and try

column in column and try row in row and try column in row :(

this all my code:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => MyCounter()),
        ChangeNotifierProvider(create: (context) => MyName()),
      ],
      child: MaterialApp(
        theme: ThemeData.dark(),
        home: const Home(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                context.watch<MyCounter>().count.toString(),
              ),
              const SizedBox(width: 99),
              Text(
                context.watch<MyName>().name,
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  context.read<MyCounter>().plusNum();
                },
                child: const Text('Plus'),
              ),
              const SizedBox(width: 33),
              ElevatedButton(
                onPressed: () {
                  context.read<MyName>().changeName();
                },
                child: const Text('Change Name'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class MyCounter with ChangeNotifier {
  int count = 0;
  plusNum() {
    count  ;
    notifyListeners();
  }
}

class MyName with ChangeNotifier {
  String name = 'Name12';

  changeName() {
    name = 'Name678';
    notifyListeners();
  }
}

CodePudding user response：

The reason you have that issue is your widget tree structure, change it to this:

Row(
    children: [
      Column(
        children: [
          Text(
            context.watch<MyCounter>().count.toString(),
          ),
          ElevatedButton(
            onPressed: () {
              context.read<MyCounter>().plusNum();
            },
            child: const Text('Plus'),
          ),
        ],
      ),
      SizedBox(
        width: 33,
      ),
      Column(
        children: [
          Text(
            context.watch<MyName>().name,
          ),
          ElevatedButton(
            onPressed: () {
              context.read<MyName>().changeName();
            },
            child: const Text('Change Name'),
          ),
        ],
      ),
    ],
  ),