[내일배움카드 코딩] 2주차 앱개발

1주차에 위젯을 통해 앱을 개발했는데 이번에는 좀 더 들어가서 위젯을 좀 더 자세히 한번 알아볼께요.

 

위젯에는 종류가 나눠진다고 하는데 StatelessWidget 과 StatefulWidget 으로 둘로 나눌 수 있어요.

 

StatelessWidget : 변화가 없어서 새로고침 등을 할 이유가 없는 위젯      

즉, 텍스트 등 변화가 필요하지 않는 위젯

• extends StatelessWidget : StatelessWidget의 기능을 물려받습니다.
• 생성자 : 클래스 이름과 동일한 함수
• build 함수 : 화면에 보여줄 자식 위젯을 반환

▼동작원리▼

 

 

StatefulWidget: 변화가 있어서 새로고침 등을 필요로 하는 위젯

기본적으로 2개의 클래스로 구성되어 있습니다.

 

     

• MyApp : StatefulWidget의 기능을 물려받은 클래스
• _MyAppState : MyApp 상태를 가진 클래스(실질적인 내용은 여기에 들어가요!)

 

"$number": $사용한 것은 변수를 사용할려고 사용함

setState: build 함수를 다시 호출

 

Navigation (화면 이동)

StatelessWidget과 StatefulWidget을 활용해 화면들을 그렸다면, 이 화면들 사이를 오갈 수도 있어야겠죠!

 

다음 페이지 이동

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()), // 이동하려는 페이지
);

현재화면 종료

 

Navigator.pop(context); // 종료

 

 

실행을 한번 시켜볼께요.

만약에 실행시켰는데 우측하단에 windows 또는 chrome이라고 되어 있으면 android로 변경해주세요.

 

다음은 우측 상단의 실행버튼처럼 생긴 것 옆에 하단으로 향하는 화살표를 클릭해주시고

run without Debugging(디버깅 없이 실행)을 클릭해주세요.

실행 시 모습

 

 실행되면 아래와 같은 바가 생성되었을 텐데 의미는 이런 느낌이예요.

 

스파르타 코딩클럽 2주차 내용 참조

이제 위에서 배운 Stateless Widget(변화가 없는 위젯)을 한번 사용해볼게요.

 

여기에서 main에 myApp을 실행시킨다고 되어 있는데 바로 아래 보시면 MyApp 클래스가 있는 것을 

볼 수 있습니다.

이 클래스에서 MaterialApp이 동작을 하는데 여기서 home으로 HomePage라는 것을 실행하는 것을 볼 수 있습니다.

 

위에서 만든 Stateless Widget을 HomePage라는 이름으로 변경하고 내용을 입력하면 에뮬에서

동작하는 것을 볼 수 있습니다.

 

 

 

 

텍스트로 home page를 출력해보겠습니다.

 

 

 

 

 

 

목표는 당근마켓이랑 비슷한 앱을 만드는 겁니다.

 

appbar를 지정하여 leading, text(title), action 등을 지정해줍니다.

 

 

 

그럼 에뮬의 상단에 이런 바가 생성된 것을 알 수 있습니다.

상단을 만들어 줬으니 이제 중단을 만들어야겠죠.

중단을 만들기 전에 방향을 어떻게 지정해주는지부터 알아야겠네요.

row와 column이 있습니다.

 

row는 가로 방향 column은 세로 방향

 

당근 마켓 형태를 보면 사진을 두고 옆에 제목, 내용 등이 나오니 저희도 Row로 가는게 맞겠죠.

중단( = 메인 = body) 부분을 Row 지정해서 생성해주시고 글은 제목, 내용 등으로 아래로 가야 

하니 column으로 나눠 주세요.

 

제일 좌측에 이미지를 넣어줄께요.

URL로 이미지를 가져올 수 있는 Image.network()를 사용

 

 

▼에러 발생▼

OS Error: No address associated with hostname,

인터넷이 연결되지 않았거나 연결 설정이 되어 있지 않음

 

해결방법

android/app/src/main/AndroidManifest.xml에 들어가서 

 

<uses-permission android:name="android.permission.INTERNET"/> 부분을 추가로 입력

계속해서 에러 발생...

혹시 그 전 데이터랑 충돌 때문에 발생한 것일 수도 있어서 한번 시도... 

AVD Manager에서 wipe Data 클릭

(android studio 실행 ▷ more Actions ▷ virtual Device Manager ▷ Wipe Data)

 

 

잘 해결된 것 같네요..

잘 모르겠지만 어디서 충돌이 있어서나 봅니다.

 

다음은 오른쪽 편에 column으로 텍스트를 입력해주는데 하나의 컨테이너(위젯)으로

묶어서 길이를 지정해 주지 않으면 오버 플로우가 발생할 수도 있습니다.

 

이런 식으로 오버 플로우 발생

expanded(위젯)으로 감싸서 해결!!

expanded: 오버 플로우가 발생하지 않는 한계선에서 최대한 공간 사용 

 

노락색 경고 등 같은게 사라진 것을 볼 수 있습니다.

이제 정렬을 해줘야하는데 주축을 무엇으로 할 것인지를 정해야 합니다.

main axis: 주축(기준 축)

cross axis: 부축(보조 축)

 

위의 이미지를 참조해서 넣으면 아래와 같이 정렬이 가능해집니다.

 

몇가지 추가 작업을 하고 리스트를 좀 추가하면 이러한 결과물이 나옵니다..

해보면서 느꼈지만 쉽지가 않네요...

저만 그런지 잘 모르겠지만 생각보다 에러도 많이 나고 해서 검색 등을 통해

해결한다고 실제 개발 시간보다 해결하는데 더 소모한 것 같네요..

 

ps) 에러 해결 방법 몇가지만 적었지만 실제로 더 많았습니다..

      시간으로 따지면 개발 3 + 에러 해결 7 느낌...