Flutter/Widgets

디자이너의 요구에 맞추다 보니 버튼에 그라데이션을 넣으라는 미션이 있었다. 편하게 InkWell로 처리하면 될것같지만 그렇지않다. 만약 컨테이너의 모서리가 둥글다면 InkWell은 둥글게 하지못하기때문에 어색하게 보이는 문제가보인다. 이를 해결하기위해서 나는 ElevatedButton을 사용하기로했다. ElevatedButton에 곧바로 적용을 할수는없었고 대신에 컨테이너를 밖에 감싸 배경색을 주고 ElevatedButton의 배경을 투명하게 만들어 적절한 효과를 줄수있었다. Container( width: width, height: height, decoration: BoxDecoration( gradient: LinearGradient(colors: [Color(0xffE73863), Color(0x..

flutter 에서 Container는 개인적으로 많이쓰는 위젯이다. Container에서 테두리를 만드는 방법은 여러가지가 있다. 전체 테두리 : Border.all() 상하 / 좌우 테두리 : Border.symmetric(horizontal : ~~~, vertical : ~~~~~) 지정 테두리 : Border() 방법은 아래와 같다 //전체테두리 Container( width: 100, height: 100, decoration: BoxDecoration(border: Border.all(color: Colors.black, width: 1)), ); //지정 테두리 Container( width: 100, height: 100, decoration: BoxDecoration( border: B..

앱을 만들다보면 자연스럽게 무한 스크롤이 필요할때가 온다. 무한스크롤이 이걸말하는지는 모르겠지만 itemCount만 지정히지않는다면 무한정으로 나오긴한다. Pagenation 무한 스크롤과 관련된 글을 조만간 정리할 예정이다. 이부분은 참고만 하도록하자. GridView.builder( itemCount: data.length, //최대로 표시될 갯수 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, //한줄에 표시할 갯수 itemBuilder: (BuildContext context, int index) {//무한 스크롤에 들어갈 요소 return new Card( child: new GridTile( footer: ..

flutter를 하기전에 vue 를하다가 와서 Row가 익숙할것만 같았다. 그런데 달랐다. 아무것도 모르는 상태에서는 아무것도 할수없어 검색하여 알아내었다. 가운데 정렬 mainAxisAlignment: MainAxisAlignment.center 이거를 Row 안에 넣어주면 된다. 왼쪽 정렬 mainAxisAlignment: MainAxisAlignment.start 오른쪽 정렬 mainAxisAlignment: MainAxisAlignment.end 양옆으로 적당히 정렬 mainAxisAlignment: MainAxisAlignment.spaceEvenly 양옆으로 조금 넓게 정렬 mainAxisAlignment: MainAxisAlignment.spaceAround 양쪽 끝으로 정렬 mainAxis..

flutter를 처음 접해보는 거라 모르는 게 많았다. 지금은 앱을 만들고 있는데 사진위에 글자가 들어가야 했다. 그런데 Image 를 사용하니 그게 안돼서 방법을 찾아냈다. Container에 배경을 사진으로 하는 것이었다. Container( decoration: new BoxDecoration( image: new DecorationImage( image: new AssetImage('images/background.png'), fit: BoxFit.cover, )//DecorationImage, )//BoxDecoration, ) 이렇게 하니 배경이 적용되었다. 근데 dart는 코드블럭이 왜 없는 거지..